@hanzogui/web 4.4.0 → 7.3.0

package/dist/esm/createComponent.mjs

@@ -1,5 +1,6 @@
 import { composeRefs } from "@hanzogui/compose-refs";
 import { isClient, isServer, isWeb, useIsomorphicLayoutEffect } from "@hanzogui/constants";
+import { NativeMenuContext } from "@hanzogui/native";
 import { composeEventHandlers } from "@hanzogui/helpers";
 import { isEqualShallow } from "@hanzogui/is-equal-shallow";
 import React, { useMemo } from "react";
@@ -9,7 +10,7 @@ import { ComponentContext } from "./contexts/ComponentContext.mjs";
 import { GroupContext } from "./contexts/GroupContext.mjs";
 import { didGetVariableValue, setDidGetVariableValue } from "./createVariable.mjs";
 import { defaultComponentStateMounted } from "./defaultComponentState.mjs";
-import { getWebEvents } from "./eventHandling.mjs";
+import { getWebEvents, useEvents, wrapWithGestureDetector } from "./eventHandling.mjs";
 import { getDefaultProps } from "./helpers/getDefaultProps.mjs";
 import { resolveAnimationDriver } from "./helpers/resolveAnimationDriver.mjs";
 import { getSplitStyles, useSplitStyles } from "./helpers/getSplitStyles.mjs";
@@ -38,27 +39,23 @@ const avoidReRenderKeys = /* @__PURE__ */new Set(["hover", "press", "pressIn", "
 if (typeof window !== "undefined") {
   const cancelPresses = () => {
     componentSetStates.forEach(setState => setState(prev => {
-      if (prev.press || prev.pressIn) {
-        return {
-          ...prev,
-          press: false,
-          pressIn: false
-        };
-      }
+      if (prev.press || prev.pressIn) return {
+        ...prev,
+        press: false,
+        pressIn: false
+      };
       return prev;
     }));
     componentSetStates.clear();
   };
   const cancelTouches = () => {
     componentSetStates.forEach(setState => setState(prev => {
-      if (prev.press || prev.pressIn || prev.hover) {
-        return {
-          ...prev,
-          press: false,
-          pressIn: false,
-          hover: false
-        };
-      }
+      if (prev.press || prev.pressIn || prev.hover) return {
+        ...prev,
+        press: false,
+        pressIn: false,
+        hover: false
+      };
       return prev;
     }));
     componentSetStates.clear();
@@ -66,72 +63,66 @@ if (typeof window !== "undefined") {
   addEventListener("mouseup", cancelPresses);
   addEventListener("touchend", cancelTouches);
   addEventListener("touchcancel", cancelTouches);
-  if (process.env.NODE_ENV === "development") {
-    startVisualizer = () => {
-      const devVisualizerConfig = devConfig?.visualizer;
-      if (devVisualizerConfig && !globalThis.__guiDevVisualizer) {
-        let show = function (val) {
-            clearTimeout(tm);
-            isShowing = val;
-            debugKeyListeners?.forEach(l => l(val));
-            if (!val && resizeListener) {
-              window.removeEventListener("resize", resizeListener);
-              resizeListener = null;
-            }
-          },
-          cancelShow = function () {
-            clearTimeout(tm);
-            if (resizeListener) {
-              window.removeEventListener("resize", resizeListener);
-              resizeListener = null;
-            }
-          };
-        globalThis.__guiDevVisualizer = true;
-        debugKeyListeners = /* @__PURE__ */new Set();
-        let tm;
-        let isShowing = false;
-        let resizeListener = null;
-        const options = {
-          key: "Alt",
-          delay: 800,
-          ...(typeof devVisualizerConfig === "object" ? devVisualizerConfig : {})
-        };
-        window.addEventListener("blur", () => {
-          show(false);
-        });
-        window.addEventListener("keydown", ({
-          key,
-          metaKey,
-          defaultPrevented
-        }) => {
+  if (process.env.NODE_ENV === "development") startVisualizer = () => {
+    const devVisualizerConfig = devConfig?.visualizer;
+    if (devVisualizerConfig && !globalThis.__guiDevVisualizer) {
+      let show = function (val) {
           clearTimeout(tm);
-          if (defaultPrevented) return;
-          if (metaKey) return;
-          if (key === options.key) {
-            if (!resizeListener) {
-              resizeListener = () => cancelShow();
-              window.addEventListener("resize", resizeListener);
-            }
-            tm = setTimeout(() => {
-              show(true);
-            }, options.delay);
+          isShowing = val;
+          debugKeyListeners?.forEach(l => l(val));
+          if (!val && resizeListener) {
+            window.removeEventListener("resize", resizeListener);
+            resizeListener = null;
           }
-        });
-        window.addEventListener("keyup", ({
-          defaultPrevented
-        }) => {
-          if (defaultPrevented) return;
-          cancelShow();
-          if (isShowing) {
-            show(false);
+        },
+        cancelShow = function () {
+          clearTimeout(tm);
+          if (resizeListener) {
+            window.removeEventListener("resize", resizeListener);
+            resizeListener = null;
           }
-        });
-      }
-    };
-  }
+        };
+      globalThis.__guiDevVisualizer = true;
+      debugKeyListeners = /* @__PURE__ */new Set();
+      let tm;
+      let isShowing = false;
+      let resizeListener = null;
+      const options = {
+        key: "Alt",
+        delay: 800,
+        ...(typeof devVisualizerConfig === "object" ? devVisualizerConfig : {})
+      };
+      window.addEventListener("blur", () => {
+        show(false);
+      });
+      window.addEventListener("keydown", ({
+        key,
+        metaKey,
+        defaultPrevented
+      }) => {
+        clearTimeout(tm);
+        if (defaultPrevented) return;
+        if (metaKey) return;
+        if (key === options.key) {
+          if (!resizeListener) {
+            resizeListener = () => cancelShow();
+            window.addEventListener("resize", resizeListener);
+          }
+          tm = setTimeout(() => {
+            show(true);
+          }, options.delay);
+        }
+      });
+      window.addEventListener("keyup", ({
+        defaultPrevented
+      }) => {
+        if (defaultPrevented) return;
+        cancelShow();
+        if (isShowing) show(false);
+      });
+    }
+  };
 }
-let BaseText;
-let BaseView;
 const lastInteractionWasKeyboard = {
   value: false
 };
@@ -140,19 +131,13 @@ const lastInteractionWasTouch = {
 };
 if (isWeb && typeof document !== "undefined") {
   document.addEventListener("keydown", () => {
-    if (!lastInteractionWasKeyboard.value) {
-      lastInteractionWasKeyboard.value = true;
-    }
+    if (!lastInteractionWasKeyboard.value) lastInteractionWasKeyboard.value = true;
   });
   document.addEventListener("mousedown", () => {
-    if (lastInteractionWasKeyboard.value) {
-      lastInteractionWasKeyboard.value = false;
-    }
+    if (lastInteractionWasKeyboard.value) lastInteractionWasKeyboard.value = false;
   });
   document.addEventListener("mousemove", () => {
-    if (lastInteractionWasKeyboard.value) {
-      lastInteractionWasKeyboard.value = false;
-    }
+    if (lastInteractionWasKeyboard.value) lastInteractionWasKeyboard.value = false;
     lastInteractionWasTouch.value = false;
   });
   document.addEventListener("touchstart", () => {
@@ -177,16 +162,6 @@ function createComponent(staticConfig) {
         startVisualizer = void 0;
       }
     }
-    if (false) {
-      if (!hasSetupBaseViews) {
-        hasSetupBaseViews = true;
-        const baseViews = hooks.getBaseViews?.();
-        if (baseViews) {
-          BaseText = baseViews.Text;
-          BaseView = baseViews.View;
-        }
-      }
-    }
     if (process.env.NODE_ENV === "test") {
       if (propsIn["data-test-renders"]) {
         propsIn["data-test-renders"]["current"] = propsIn["data-test-renders"]["current"] ?? 0;
@@ -202,80 +177,67 @@ function createComponent(staticConfig) {
     let overriddenContextProps = null;
     const componentContext = React.useContext(ComponentContext);
     const hasTextAncestor = !!(isWeb && isText ? componentContext.inText : false);
-    const isInsideNativeMenu = false ? React.useContext(NativeMenuContext) : false;
     if (!process.env.GUI_IS_CORE_NODE && process.env.NODE_ENV === "development" && debugProp === "profile" && !time) {
-      const timer = require("@hanzogui/timer").timer();
-      time = timer.start();
+      time = require("@hanzogui/timer").timer().start();
       globalThis["time"] = time;
     }
-    if (process.env.NODE_ENV === "development" && !time && globalThis.time) {
-      time = globalThis.time;
-    }
-    if (process.env.NODE_ENV === "development" && time) time`non-tamagui time (ignore)`;
+    if (process.env.NODE_ENV === "development" && !time && globalThis.time) time = globalThis.time;
+    if (process.env.NODE_ENV === "development" && time) time`non-gui time (ignore)`;
     let props = propsIn;
     const componentName = props.componentName || staticConfig.componentName;
-    const defaultProps = getDefaultProps(staticConfig, props.componentName);
-    const [nextProps, overrides] = mergeComponentProps(defaultProps, styledContextValue, propsIn);
+    const [nextProps, overrides] = mergeComponentProps(getDefaultProps(staticConfig, props.componentName), styledContextValue, propsIn);
     props = nextProps;
     overriddenContextProps = overrides;
-    if (process.env.NODE_ENV === "development" && isClient) {
-      React.useEffect(() => {
-        let node;
-        let overlay = null;
-        const remove = () => {
-          if (overlay) {
-            try {
-              overlay.parentNode?.removeChild(overlay);
-              overlay = null;
-            } catch {}
-          }
-        };
-        const debugVisualizerHandler = (show = false) => {
-          node = stateRef.current.host;
-          if (!node) return;
-          if (show) {
-            if (!overlay) {
-              overlay = document.createElement("span");
-              overlay.style.inset = "0px";
-              overlay.style.zIndex = "1000000";
-              overlay.style.position = "absolute";
-              overlay.style.borderColor = "red";
-              overlay.style.borderWidth = "1px";
-              overlay.style.borderStyle = "dotted";
-            }
-            const dataAt = node.getAttribute("data-at") || "";
-            const dataIn = node.getAttribute("data-in") || "";
-            const tooltip = document.createElement("span");
-            tooltip.style.position = "absolute";
-            tooltip.style.top = "0px";
-            tooltip.style.left = "0px";
-            tooltip.style.padding = "3px";
-            tooltip.style.background = "rgba(0,0,0,0.75)";
-            tooltip.style.color = "rgba(255,255,255,1)";
-            tooltip.style.fontSize = "12px";
-            tooltip.style.lineHeight = "12px";
-            tooltip.style.fontFamily = "monospace";
-            tooltip.innerText = `${componentName || ""} ${dataAt} ${dataIn}`.trim();
-            overlay.appendChild(tooltip);
-            node.appendChild(overlay);
-          } else {
-            remove();
+    if (process.env.NODE_ENV === "development" && isClient) React.useEffect(() => {
+      let node;
+      let overlay = null;
+      const remove = () => {
+        if (overlay) try {
+          overlay.parentNode?.removeChild(overlay);
+          overlay = null;
+        } catch {}
+      };
+      const debugVisualizerHandler = (show = false) => {
+        node = stateRef.current.host;
+        if (!node) return;
+        if (show) {
+          if (!overlay) {
+            overlay = document.createElement("span");
+            overlay.style.inset = "0px";
+            overlay.style.zIndex = "1000000";
+            overlay.style.position = "absolute";
+            overlay.style.borderColor = "red";
+            overlay.style.borderWidth = "1px";
+            overlay.style.borderStyle = "dotted";
           }
-        };
-        debugKeyListeners = debugKeyListeners || /* @__PURE__ */new Set();
-        debugKeyListeners.add(debugVisualizerHandler);
-        return () => {
-          remove();
-          debugKeyListeners?.delete(debugVisualizerHandler);
-        };
-      }, [componentName]);
-    }
+          const dataAt = node.getAttribute("data-at") || "";
+          const dataIn = node.getAttribute("data-in") || "";
+          const tooltip = document.createElement("span");
+          tooltip.style.position = "absolute";
+          tooltip.style.top = "0px";
+          tooltip.style.left = "0px";
+          tooltip.style.padding = "3px";
+          tooltip.style.background = "rgba(0,0,0,0.75)";
+          tooltip.style.color = "rgba(255,255,255,1)";
+          tooltip.style.fontSize = "12px";
+          tooltip.style.lineHeight = "12px";
+          tooltip.style.fontFamily = "monospace";
+          tooltip.innerText = `${componentName || ""} ${dataAt} ${dataIn}`.trim();
+          overlay.appendChild(tooltip);
+          node.appendChild(overlay);
+        } else remove();
+      };
+      debugKeyListeners = debugKeyListeners || /* @__PURE__ */new Set();
+      debugKeyListeners.add(debugVisualizerHandler);
+      return () => {
+        remove();
+        debugKeyListeners?.delete(debugVisualizerHandler);
+      };
+    }, [componentName]);
     const groupContextParent = React.useContext(GroupContext);
     const animationDriver = (() => {
       if (props.animatedBy && config) {
-        if (config.animationDrivers) {
-          return config.animationDrivers[props.animatedBy] ?? config.animations;
-        }
+        if (config.animationDrivers) return config.animationDrivers[props.animatedBy] ?? config.animations;
         return props.animatedBy === "default" ? config.animations : null;
       }
       return resolveAnimationDriver(componentContext.animationDriver) ?? resolveAnimationDriver(config?.animations) ?? null;
@@ -302,19 +264,15 @@ function createComponent(staticConfig) {
       willBeAnimatedClient,
       startedUnhydrated
     } = componentState;
-    if (hasAnimationProp && animationDriver?.avoidReRenders) {
-      useIsomorphicLayoutEffect(() => {
-        const pendingState = stateRef.current.nextState;
-        if (pendingState) {
-          stateRef.current.nextState = void 0;
-          componentState.setStateShallow(pendingState);
-        }
-      });
-    }
-    const allGroupContexts = useMemo(() => {
-      if (!groupName || props.passThrough) {
-        return groupContextParent;
+    if (hasAnimationProp && animationDriver?.avoidReRenders) useIsomorphicLayoutEffect(() => {
+      const pendingState = stateRef.current.nextState;
+      if (pendingState) {
+        stateRef.current.nextState = void 0;
+        componentState.setStateShallow(pendingState);
       }
+    });
+    const allGroupContexts = useMemo(() => {
+      if (!groupName || props.passThrough) return groupContextParent;
       const listeners = /* @__PURE__ */new Set();
       stateRef.current.group?.listeners?.clear();
       stateRef.current.group = {
@@ -324,18 +282,14 @@ function createComponent(staticConfig) {
         },
         subscribe(cb) {
           listeners.add(cb);
-          if (listeners.size === 1) {
-            setStateShallow({
-              hasDynGroupChildren: true
-            });
-          }
+          if (listeners.size === 1) setStateShallow({
+            hasDynGroupChildren: true
+          });
           return () => {
             listeners.delete(cb);
-            if (listeners.size === 0) {
-              setStateShallow({
-                hasDynGroupChildren: false
-              });
-            }
+            if (listeners.size === 0) setStateShallow({
+              hasDynGroupChildren: false
+            });
           };
         }
       };
@@ -357,18 +311,11 @@ function createComponent(staticConfig) {
     let setStateShallow = componentState.setStateShallow;
     if (process.env.NODE_ENV === "development" && time) time`use-state`;
     const renderProp = props.render;
-    const isRenderString = !Component || typeof Component === "string";
-    const element = isWeb ? isRenderString ? renderProp || Component : Component : Component;
-    const BaseTextComponent = BaseText || element || "span";
-    const BaseViewComponent = BaseView || element || (hasTextAncestor ? "span" : "div");
-    const BaseComponent = isText ? BaseTextComponent : BaseViewComponent;
+    const element = isWeb ? !Component || typeof Component === "string" ? renderProp || Component : Component : Component;
+    const BaseComponent = isText ? element || "span" : element || (hasTextAncestor ? "span" : "div");
     let elementType = BaseComponent;
-    const isAnimatedCustomComponent = animationDriver && isAnimated && animationDriver.needsCustomComponent;
-    if (isAnimatedCustomComponent) {
-      elementType = animationDriver[isText ? "Text" : "View"] || elementType;
-    }
-    const disableThemeProp = false ? false : props["data-disable-theme"];
-    const disableTheme = disableThemeProp || isHOC;
+    if (animationDriver && isAnimated && animationDriver.needsCustomComponent) elementType = animationDriver[isText ? "Text" : "View"] || elementType;
+    const disableTheme = props["data-disable-theme"] || isHOC;
     if (process.env.NODE_ENV === "development" && time) time`theme-props`;
     const themeStateProps = {
       componentName,
@@ -377,13 +324,8 @@ function createComponent(staticConfig) {
       debug: debugProp,
       unstyled: props.unstyled
     };
-    if ("theme" in props) {
-      themeStateProps.name = props.theme;
-    }
+    if ("theme" in props) themeStateProps.name = props.theme;
     themeStateProps.needsUpdate = () => !!stateRef.current.isListeningToTheme;
-    if (false) {
-      themeStateProps.deopt = willBeAnimated;
-    }
     if (process.env.NODE_ENV === "development") {
       if (debugProp && debugProp !== "profile") {
         const name = `${componentName || Component?.displayName || Component?.name || "[Unnamed Component]"}`;
@@ -392,19 +334,15 @@ function createComponent(staticConfig) {
         const banner = `<${name} /> ${internalID} ${dataIs ? ` ${dataIs}` : ""} ${type.trim()} (hydrated: ${isHydrated}) (unmounted: ${state.unmounted})`;
         const ch = propsIn.children;
         let childLog = typeof ch === "string" ? ch.length > 4 ? ch.slice(0, 4) + "..." : ch : "";
-        if (childLog.length) {
-          childLog = `(children: ${childLog})`;
-        }
+        if (childLog.length) childLog = `(children: ${childLog})`;
         if (isWeb) {
           console.info(`%c ${banner}`, "background: green; color: white;");
-          if (isServer) {
-            log({
-              noClass,
-              isAnimated,
-              isWeb,
-              inputStyle
-            });
-          } else {
+          if (isServer) log({
+            noClass,
+            isAnimated,
+            isWeb,
+            inputStyle
+          });else {
             console.groupEnd();
             console.groupCollapsed(`${childLog} [inspect props, state, context \u{1F447}]`);
             log("props in:", propsIn);
@@ -458,13 +396,10 @@ ${banner}
     const mediaState = useMedia(componentContext, debugProp);
     setDidGetVariableValue(false);
     if (process.env.NODE_ENV === "development" && time) time`media`;
-    const resolveValues =
-    // if HOC + mounted + has animation prop, resolve as value so it passes non-variable to child
-    isAnimated && inputStyle !== "css" || isHOC && state.unmounted == false && hasAnimationProp ? "value" : "auto";
     const styleProps = {
       mediaState,
       noClass,
-      resolveValues,
+      resolveValues: isAnimated && inputStyle !== "css" || isHOC && state.unmounted == false && hasAnimationProp ? "value" : "auto",
       isExiting,
       isAnimated,
       willBeAnimated,
@@ -482,23 +417,17 @@ ${banner}
           overriddenContextProps = overriddenContextProps || {};
           overriddenContextProps[key] = splitStyles.overriddenContextProps[key];
         }
-        if (!staticConfig.context) {
-          contextForOverride = contextForProps;
-        }
+        if (!staticConfig.context) contextForOverride = contextForProps;
       }
     }
     const groupContext = groupName ? allGroupContexts?.[groupName] || null : null;
-    if (!isPassthrough && groupContext &&
-    // avoids onLayout if we don't need it
-    props.containerType !== "normal") {
+    if (!isPassthrough && groupContext && props.containerType !== "normal") {
       const groupState = groupContext?.state;
       if (groupState && groupState.layout === void 0) {
-        if (splitStyles.style?.width || splitStyles.style?.height) {
-          groupState.layout = {
-            width: fromPx(splitStyles.style.width),
-            height: fromPx(splitStyles.style.height)
-          };
-        }
+        if (splitStyles.style?.width || splitStyles.style?.height) groupState.layout = {
+          width: fromPx(splitStyles.style.width),
+          height: fromPx(splitStyles.style.height)
+        };
       }
     }
     const hasEnterExitTransition = props.transition && typeof props.transition === "object" && !Array.isArray(props.transition) && ("enter" in props.transition || "exit" in props.transition);
@@ -549,16 +478,12 @@ ${banner}
         };
       }
       componentContext.mediaEmit = componentContext.mediaEmit || (next => {
-        for (const listener of componentContext.mediaEmitListeners) {
-          listener(next);
-        }
+        for (const listener of componentContext.mediaEmitListeners) listener(next);
       });
       stateRef.current.setStateShallow = nextOrGetNext => {
         const prev = stateRef.current.nextState || state;
         const next = typeof nextOrGetNext === "function" ? nextOrGetNext(prev) : nextOrGetNext;
-        if (next === prev || isEqualShallow(prev, next)) {
-          return;
-        }
+        if (next === prev || isEqualShallow(prev, next)) return;
         const canAvoidReRender = Object.keys(next).every(key => avoidReRenderKeys.has(key));
         const updatedState = {
           ...prev,
@@ -577,12 +502,10 @@ ${banner}
           updateGroupListeners();
           stateRef.current.updateStyleListener?.();
         } else {
-          if (process.env.NODE_ENV === "development" && debugProp && debugProp !== "profile") {
-            console.info(`[\u{1F40C}] re-render`, {
-              canAvoidReRender,
-              next
-            });
-          }
+          if (process.env.NODE_ENV === "development" && debugProp && debugProp !== "profile") console.info(`[\u{1F40C}] re-render`, {
+            canAvoidReRender,
+            next
+          });
           ogSetStateShallow(next);
         }
       };
@@ -596,16 +519,12 @@ ${banner}
         splitStyles.style = splitStyles.style || {};
         splitStyles.style.opacity = 0;
       }
-      if (splitStyles.dynamicThemeAccess != null) {
-        stateRef.current.isListeningToTheme = splitStyles.dynamicThemeAccess;
-      }
+      if (splitStyles.dynamicThemeAccess != null) stateRef.current.isListeningToTheme = splitStyles.dynamicThemeAccess;
     }
     const hasRuntimeMediaKeys = splitStyles?.hasMedia && splitStyles.hasMedia !== true;
     const shouldListenForMedia = didGetVariableValue() || hasRuntimeMediaKeys || noClass && splitStyles?.hasMedia === true;
     const mediaListeningKeys = hasRuntimeMediaKeys ? splitStyles.hasMedia : null;
-    if (process.env.NODE_ENV === "development" && debugProp === "verbose") {
-      console.info(`useMedia() createComponent`, shouldListenForMedia, mediaListeningKeys);
-    }
+    if (process.env.NODE_ENV === "development" && debugProp === "verbose") console.info(`useMedia() createComponent`, shouldListenForMedia, mediaListeningKeys);
     setMediaShouldUpdate(componentContext, shouldListenForMedia, mediaListeningKeys);
     const {
       viewProps: viewPropsIn,
@@ -634,48 +553,33 @@ ${banner}
       onFocus,
       onBlur,
       separator,
-      // ignore from here on out
       passThrough,
       forceStyle: _forceStyle,
-      // @ts-ignore  for next/link compat etc
       onClick,
       theme: _themeProp,
       ...nonGuiProps
     } = viewPropsIn || {};
     let viewProps = nonGuiProps;
-    if (props.forceStyle) {
-      viewProps.forceStyle = props.forceStyle;
-    }
+    if (props.forceStyle) viewProps.forceStyle = props.forceStyle;
     if (isHOC) {
-      if (typeof _themeProp !== "undefined") {
-        viewProps.theme = _themeProp;
-      }
-      if (typeof passThrough !== "undefined") {
-        viewProps.passThrough = passThrough;
-      }
+      if (typeof _themeProp !== "undefined") viewProps.theme = _themeProp;
+      if (typeof passThrough !== "undefined") viewProps.passThrough = passThrough;
     }
     let animationStyles;
-    const shouldUseAnimation =
-    // if it supports css vars we run it on server too to get matching initial style
-    (inputStyle === "css" ? willBeAnimatedClient : willBeAnimated) && useAnimations && !isHOC;
+    const shouldUseAnimation = (inputStyle === "css" ? willBeAnimatedClient : willBeAnimated) && useAnimations && !isHOC;
     let animatedRef;
     if (shouldUseAnimation) {
       const useStyleEmitter = animationDriver?.avoidReRenders ? listener => {
         stateRef.current.useStyleListener = listener;
       } : void 0;
       const effectiveTransition = resolveEffectivePseudoTransition(stateRef.current.prevPseudoState, state, splitStyles?.pseudoTransitions, props.transition);
-      if (splitStyles) {
-        splitStyles.effectiveTransition = effectiveTransition;
-      }
+      if (splitStyles) splitStyles.effectiveTransition = effectiveTransition;
       stateRef.current.prevPseudoState = extractPseudoState(state);
       const animations = useAnimations({
         props: propsWithAnimation,
-        // 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,
@@ -688,56 +592,38 @@ ${banner}
         stateRef
       });
       if (animations) {
-        if (animations.ref) {
-          animatedRef = animations.ref;
-        }
+        if (animations.ref) animatedRef = animations.ref;
         if (isHydrated && animations) {
           animationStyles = animations.style;
           viewProps.style = animationStyles;
-          if (animations.className) {
-            viewProps.className = `${state.unmounted === "should-enter" ? "t_unmounted " : ""}${viewProps.className || ""} ${animations.className}`;
-          }
+          if (animations.className) viewProps.className = `${state.unmounted === "should-enter" ? "t_unmounted " : ""}${viewProps.className || ""} ${animations.className}`;
         }
       }
       if (process.env.NODE_ENV === "development" && time) time`animations`;
     }
-    if (process.env.NODE_ENV === "development" && props.untilMeasured && !props.group) {
-      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.
+    if (process.env.NODE_ENV === "development" && props.untilMeasured && !props.group) 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.
 
 If 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}`);
-    }
     if (process.env.NODE_ENV === "development" && time) time`destructure`;
-    if (!isPassthrough && groupContext &&
-    // avoids onLayout if we don't need it
-    props.containerType !== "normal") {
-      nonGuiProps.onLayout = composeEventHandlers(nonGuiProps.onLayout, e => {
-        const layout = e.nativeEvent.layout;
-        groupContext.state.layout = layout;
-        stateRef.current.group?.emit({
-          layout
-        });
-        if (!stateRef.current.hasMeasured && props.untilMeasured === "hide") {
-          setState(prev => ({
-            ...prev
-          }));
-        }
-        stateRef.current.hasMeasured = true;
+    if (!isPassthrough && groupContext && props.containerType !== "normal") nonGuiProps.onLayout = composeEventHandlers(nonGuiProps.onLayout, e => {
+      const layout = e.nativeEvent.layout;
+      groupContext.state.layout = layout;
+      stateRef.current.group?.emit({
+        layout
       });
-    }
+      if (!stateRef.current.hasMeasured && props.untilMeasured === "hide") setState(prev => ({
+        ...prev
+      }));
+      stateRef.current.hasMeasured = true;
+    });
     viewProps = hooks.usePropsTransform?.(elementType, nonGuiProps, stateRef, stateRef.current.willHydrate) || nonGuiProps;
-    if (!stateRef.current.composedRef) {
-      stateRef.current.composedRef = composeRefs(x => stateRef.current.host = x, forwardedRef, setElementProps, animatedRef);
-    }
+    if (!stateRef.current.composedRef) stateRef.current.composedRef = composeRefs(x => stateRef.current.host = x, forwardedRef, setElementProps, animatedRef);
     viewProps.ref = stateRef.current.composedRef;
     usePointerEvents(props, viewProps);
     if (process.env.NODE_ENV === "development") {
-      if (!isReactNative && !isText && isWeb && !isHOC) {
-        React.Children.toArray(props.children).forEach(item => {
-          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"}>.`, props);
-          }
-        });
-      }
+      if (!isReactNative && !isText && isWeb && !isHOC) React.Children.toArray(props.children).forEach(item => {
+        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"}>.`, props);
+      });
     }
     if (process.env.NODE_ENV === "development" && time) time`events-hooks`;
     const unPress = () => {
@@ -746,25 +632,23 @@ If you meant to do this, you can disable this warning - either change untilMeasu
         pressIn: false
       });
     };
-    if (process.env.NODE_ENV === "development" && isWeb) {
-      useIsomorphicLayoutEffect(() => {
-        if (debugProp === "verbose") {
-          let cssStyleDeclarationToObject = function (style) {
-            const styleObject = {};
-            for (let i = 0; i < style.length; i++) {
-              let prop = style[i];
-              styleObject[prop] = style.getPropertyValue(prop);
-            }
-            return styleObject;
-          };
-          const computed = stateRef.current.host ? cssStyleDeclarationToObject(getComputedStyle(stateRef.current.host)) : {};
-          console.groupCollapsed(`Rendered > (opacity: ${computed.opacity})`);
-          console.warn(stateRef.current.host);
-          console.warn(computed);
-          console.groupEnd();
-        }
-      });
-    }
+    if (process.env.NODE_ENV === "development" && isWeb) useIsomorphicLayoutEffect(() => {
+      if (debugProp === "verbose") {
+        let cssStyleDeclarationToObject = function (style) {
+          const styleObject = {};
+          for (let i = 0; i < style.length; i++) {
+            let prop = style[i];
+            styleObject[prop] = style.getPropertyValue(prop);
+          }
+          return styleObject;
+        };
+        const computed = stateRef.current.host ? cssStyleDeclarationToObject(getComputedStyle(stateRef.current.host)) : {};
+        console.groupCollapsed(`Rendered > (opacity: ${computed.opacity})`);
+        console.warn(stateRef.current.host);
+        console.warn(computed);
+        console.groupEnd();
+      }
+    });
     useIsomorphicLayoutEffect(() => {
       if (state.unmounted === true && hasEnterStyle) {
         setStateShallow({
@@ -825,20 +709,18 @@ If you meant to do this, you can disable this warning - either change untilMeasu
     const shouldAttach = !disabled && !props.asChild && Boolean(attachFocus || attachPress || attachHover || runtimePressStyle || runtimeHoverStyle || runtimeFocusStyle);
     const needsPressState = Boolean(hasDynamicGroupChildren || runtimePressStyle);
     if (process.env.NODE_ENV === "development" && time) time`events-setup`;
-    if (process.env.NODE_ENV === "development" && debugProp === "verbose") {
-      log(`\u{1FAA9} events()`, {
-        runtimeFocusStyle,
-        runtimePressStyle,
-        runtimeHoverStyle,
-        runtimeFocusVisibleStyle,
-        attachPress,
-        attachFocus,
-        attachHover,
-        shouldAttach,
-        needsHoverState,
-        pseudos
-      });
-    }
+    if (process.env.NODE_ENV === "development" && debugProp === "verbose") log(`\u{1FAA9} events()`, {
+      runtimeFocusStyle,
+      runtimePressStyle,
+      runtimeHoverStyle,
+      runtimeFocusVisibleStyle,
+      attachPress,
+      attachFocus,
+      attachHover,
+      shouldAttach,
+      needsHoverState,
+      pseudos
+    });
     const events = shouldAttach ? {
       onPressOut: attachPress ? e => {
         unPress();
@@ -848,13 +730,9 @@ If you meant to do this, you can disable this warning - either change untilMeasu
       ...((attachHover || attachPress) && {
         onMouseEnter: e => {
           const next = {};
-          if (needsHoverState && !lastInteractionWasTouch.value) {
-            next.hover = true;
-          }
+          if (needsHoverState && !lastInteractionWasTouch.value) next.hover = true;
           if (needsPressState) {
-            if (state.pressIn) {
-              next.press = true;
-            }
+            if (state.pressIn) next.press = true;
           }
           setStateShallow(next);
           onHoverIn?.(e);
@@ -862,9 +740,7 @@ If you meant to do this, you can disable this warning - either change untilMeasu
         },
         onMouseLeave: e => {
           const next = {};
-          if (needsHoverState) {
-            next.hover = false;
-          }
+          if (needsHoverState) next.hover = false;
           if (needsPressState) {
             next.press = false;
             next.pressIn = false;
@@ -875,32 +751,21 @@ If you meant to do this, you can disable this warning - either change untilMeasu
         }
       }),
       onPressIn: attachPress ? e => {
-        if (needsPressState) {
-          setStateShallow({
-            press: true,
-            pressIn: true
-          });
-        }
+        if (needsPressState) setStateShallow({
+          press: true,
+          pressIn: true
+        });
         onPressIn?.(e);
         onMouseDown?.(e);
-        if (isWeb) {
-          componentSetStates.add(setState);
-        }
+        if (isWeb) componentSetStates.add(setState);
       } : void 0,
       onPress: attachPress ? e => {
         unPress();
-        if (true) {
-          onClick?.(e);
-          if (onPress || onClick) {
-            e.stopPropagation();
-          }
-        }
+        onClick?.(e);
+        if (onPress || onClick) e.stopPropagation();
         onPress?.(e);
-        if (true) {
-          onLongPress?.(e);
-        }
+        onLongPress?.(e);
       } : void 0,
-      ...false,
       ...(attachFocus && {
         onFocus: e => {
           const next = {};
@@ -911,23 +776,15 @@ If you meant to do this, you can disable this warning - either change untilMeasu
             next.focusWithin = true;
           }
           if (pseudos?.focusVisibleStyle) {
-            if (lastInteractionWasKeyboard.value) {
-              next.focusVisible = true;
-            } else {
-              next.focus = true;
-            }
-          } else {
-            next.focus = true;
-          }
+            if (lastInteractionWasKeyboard.value) next.focusVisible = true;else next.focus = true;
+          } else next.focus = true;
           setStateShallow(next);
           onFocus?.(e);
         },
         onBlur: e => {
-          if (componentContext.setParentFocusState) {
-            componentContext.setParentFocusState({
-              focusWithin: false
-            });
-          }
+          if (componentContext.setParentFocusState) componentContext.setParentFocusState({
+            focusWithin: false
+          });
           setStateShallow({
             focus: false,
             focusVisible: false,
@@ -937,39 +794,20 @@ If you meant to do this, you can disable this warning - either change untilMeasu
         }
       })
     } : null;
-    if (false) {
-      Object.assign(events, {
-        cancelable: !viewProps.rejectResponderTermination,
-        disabled,
-        hitSlop: viewProps.hitSlop,
-        delayLongPress: viewProps.delayLongPress,
-        delayPressIn: viewProps.delayPressIn,
-        delayPressOut: viewProps.delayPressOut,
-        focusable: viewProps.focusable ?? true,
-        minPressDuration: 0
-      });
-    }
-    if (events && !isReactNative) {
-      Object.assign(viewProps, getWebEvents(events));
-    }
+    if (events && !isReactNative) Object.assign(viewProps, getWebEvents(events));
     if (process.env.NODE_ENV === "development" && time) time`events`;
-    if (process.env.NODE_ENV === "development" && debugProp === "verbose") {
-      log(`events`, {
-        events,
-        attachHover,
-        attachPress
-      });
-    }
+    if (process.env.NODE_ENV === "development" && debugProp === "verbose") log(`events`, {
+      events,
+      attachHover,
+      attachPress
+    });
     const propsWithHref = props;
     const propsInWithHref = propsIn;
-    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;
-    const pressGesture = false ? useEvents(events, viewProps, stateRef, staticConfig, isHOC, isInsideNativeMenu, pressDebugName) : null;
+    [componentName, props.testID ?? propsIn.testID ?? props.accessibilityLabel ?? propsIn.accessibilityLabel ?? (typeof propsWithHref.href === "string" ? propsWithHref.href : null) ?? (typeof propsInWithHref.href === "string" ? propsInWithHref.href : null)].filter(Boolean).join(":");
     if (process.env.NODE_ENV === "development" && time) time`hooks`;
     if (asChild) {
       elementType = Slot;
-      if (true) {
-        const webStyleEvents = asChild === "web" || asChild === "except-style-web";
+      {
         const passEvents = getWebEvents({
           onPress,
           onLongPress,
@@ -979,27 +817,18 @@ If you meant to do this, you can disable this warning - either change untilMeasu
           onMouseDown,
           onMouseEnter,
           onMouseLeave
-        }, webStyleEvents);
+        }, asChild === "web" || asChild === "except-style-web");
         Object.assign(viewProps, passEvents);
-      } else {
-        Object.assign(viewProps, {
-          onPress,
-          onLongPress
-        });
       }
     }
     if (process.env.NODE_ENV === "development" && time) time`spaced-as-child`;
     let content;
-    if (isPassthrough) {
-      content = React.createElement(BaseComponent, {
-        style: {
-          display: "contents"
-        }
-      }, propsIn.children);
-    } else {
-      if (hooks.useChildren) {
-        content = hooks.useChildren(elementType, content || children, viewProps);
+    if (isPassthrough) content = React.createElement(BaseComponent, {
+      style: {
+        display: "contents"
       }
+    }, propsIn.children);else {
+      if (hooks.useChildren) content = hooks.useChildren(elementType, content || children, viewProps);
       const isRenderPropString = typeof renderProp === "string";
       if (renderProp && !isRenderPropString) {
         const out = getCustomRender(renderProp, content || children, viewProps, componentState);
@@ -1009,76 +838,47 @@ If you meant to do this, you can disable this warning - either change untilMeasu
         }
       }
       if (!content) {
-        if (isRenderPropString) {
-          viewProps.render === renderProp;
-        }
+        if (isRenderPropString) viewProps.render;
         content = React.createElement(elementType, viewProps, content || children);
       }
       if (process.env.NODE_ENV === "development" && time) time`use-children`;
     }
-    if (false) {
-      const isCompositeComponent = !isHOC && Component && typeof Component !== "string";
-      content = wrapWithGestureDetector(content, pressGesture, stateRef, isHOC, isCompositeComponent);
-    }
     const ResetPresence = animationDriver?.ResetPresence;
     const needsReset = Boolean(
     // not when passing down to child
-    !asChild &&
-    // not when passThrough
-    splitStyles &&
-    // not when HOC
-    !isHOC && ResetPresence && willBeAnimated && (hasEnterStyle || presenceState));
+    !asChild && splitStyles && !isHOC && ResetPresence && willBeAnimated && (hasEnterStyle || presenceState));
     const hasEverReset = stateRef.current.hasEverResetPresence;
-    if (needsReset && !hasEverReset) {
-      stateRef.current.hasEverResetPresence = true;
-    }
-    const renderReset = needsReset || hasEverReset;
-    if (renderReset && ResetPresence) {
-      content = /* @__PURE__ */jsx(ResetPresence, {
-        disabled: !needsReset,
-        children: content
-      });
-    }
+    if (needsReset && !hasEverReset) stateRef.current.hasEverResetPresence = true;
+    if ((needsReset || hasEverReset) && ResetPresence) content = /* @__PURE__ */jsx(ResetPresence, {
+      disabled: !needsReset,
+      children: content
+    });
     if (process.env.NODE_ENV === "development" && time) time`create-element`;
-    if ("focusWithinStyle" in propsIn || pseudos?.focusWithinStyle) {
-      content = /* @__PURE__ */jsx(ComponentContext.Provider, {
-        ...componentContext,
-        setParentFocusState: setStateShallow,
-        children: content
-      });
-    }
-    if ("group" in props) {
-      content = /* @__PURE__ */jsx(GroupContext.Provider, {
-        value: allGroupContexts,
-        children: content
-      });
-    }
-    if (!asChild && isText && !hasTextAncestor) {
-      content = /* @__PURE__ */jsx(ComponentContext.Provider, {
-        ...componentContext,
-        inText: true,
-        children: content
-      });
-    }
+    if ("focusWithinStyle" in propsIn || pseudos?.focusWithinStyle) content = /* @__PURE__ */jsx(ComponentContext.Provider, {
+      ...componentContext,
+      setParentFocusState: setStateShallow,
+      children: content
+    });
+    if ("group" in props) content = /* @__PURE__ */jsx(GroupContext.Provider, {
+      value: allGroupContexts,
+      children: content
+    });
+    if (!asChild && isText && !hasTextAncestor) content = /* @__PURE__ */jsx(ComponentContext.Provider, {
+      ...componentContext,
+      inText: true,
+      children: content
+    });
     if (process.env.NODE_ENV === "development" && time) time`group-context`;
     content = disableTheme || !splitStyles ? content : getThemedChildren(themeState, content, themeStateProps, false, stateRef);
     if (process.env.NODE_ENV === "development" && time) time`themed-children`;
-    if (true) {
-      if (isReactNative && !asChild) {
-        content = /* @__PURE__ */jsx("span", {
-          className: "_dsp_contents",
-          ...(!isPassthrough && isHydrated && events && getWebEvents(events)),
-          children: content
-        });
-      }
-    }
+    if (isReactNative && !asChild) content = /* @__PURE__ */jsx("span", {
+      className: "_dsp_contents",
+      ...(!isPassthrough && isHydrated && events && getWebEvents(events)),
+      children: content
+    });
     if (overriddenContextProps && contextForOverride) {
       const Provider = contextForOverride.Provider;
-      for (const key in styledContextValue) {
-        if (!(key in overriddenContextProps)) {
-          overriddenContextProps[key] = styledContextValue[key];
-        }
-      }
+      for (const key in styledContextValue) if (!(key in overriddenContextProps)) overriddenContextProps[key] = styledContextValue[key];
       content = /* @__PURE__ */jsx(Provider, {
         __disableMergeDefaultValues: true,
         ...overriddenContextProps,
@@ -1086,61 +886,52 @@ If you meant to do this, you can disable this warning - either change untilMeasu
       });
     }
     if (process.env.NODE_ENV === "development" && time) time`context-override`;
-    if (startedUnhydrated && splitStyles) {
-      content = /* @__PURE__ */jsxs(Fragment, {
-        children: [content, !isHydrated ? getStyleTags(Object.values(splitStyles.rulesToInsert)) : null]
-      });
-    }
+    if (startedUnhydrated && splitStyles) content = /* @__PURE__ */jsxs(Fragment, {
+      children: [content, !isHydrated ? getStyleTags(Object.values(splitStyles.rulesToInsert)) : null]
+    });
     if (process.env.NODE_ENV === "development" && time) time`style-tags`;
     if (process.env.NODE_ENV === "development") {
       if (debugProp && debugProp !== "profile") {
-        const element2 = typeof elementType === "string" ? elementType : "Component";
-        const title = `render <${element2} /> (${internalID}) with props`;
+        const title = `render <${typeof elementType === "string" ? elementType : "Component"} /> (${internalID}) with props`;
         if (!isWeb || !isClient) {
           log(title);
           log(`state: `, state);
-          if (isDevTools) {
-            log("viewProps", viewProps);
-          }
+          if (isDevTools) log("viewProps", viewProps);
           log(`final styles:`);
-          for (const key in splitStylesStyle) {
-            log(key, splitStylesStyle[key]);
-          }
+          for (const key in splitStylesStyle) log(key, splitStylesStyle[key]);
         } else {
           console.groupCollapsed(title);
           try {
             log("viewProps", viewProps);
             log("children", content);
-            if (typeof window !== "undefined") {
-              log({
-                propsIn,
-                props,
-                attachPress,
-                animationStyles,
-                classNames,
-                content,
-                elementType,
-                events,
-                isAnimated,
-                hasRuntimeMediaKeys,
-                isStringElement,
-                mediaListeningKeys,
-                pseudos,
-                shouldAttach,
-                noClass,
-                shouldListenForMedia,
-                splitStyles,
-                splitStylesStyle,
-                state,
-                stateRef,
-                staticConfig,
-                styleProps,
-                themeState,
-                viewProps,
-                willBeAnimated,
-                startedUnhydrated
-              });
-            }
+            if (typeof window !== "undefined") log({
+              propsIn,
+              props,
+              attachPress,
+              animationStyles,
+              classNames,
+              content,
+              elementType,
+              events,
+              isAnimated,
+              hasRuntimeMediaKeys,
+              isStringElement,
+              mediaListeningKeys,
+              pseudos,
+              shouldAttach,
+              noClass,
+              shouldListenForMedia,
+              splitStyles,
+              splitStylesStyle,
+              state,
+              stateRef,
+              staticConfig,
+              styleProps,
+              themeState,
+              viewProps,
+              willBeAnimated,
+              startedUnhydrated
+            });
           } catch {} finally {
             console.groupEnd();
           }
@@ -1162,9 +953,7 @@ If you meant to do this, you can disable this warning - either change untilMeasu
     return content;
   });
   function notifyGroupSubscribers(groupContext, groupEmitter, pseudo) {
-    if (!groupContext || !groupEmitter) {
-      return;
-    }
+    if (!groupContext || !groupEmitter) return;
     const nextState = {
       ...groupContext.state,
       pseudo
@@ -1172,9 +961,7 @@ If you meant to do this, you can disable this warning - either change untilMeasu
     groupEmitter.emit(nextState);
     groupContext.state = nextState;
   }
-  if (staticConfig.componentName) {
-    component.displayName = staticConfig.componentName;
-  }
+  if (staticConfig.componentName) component.displayName = staticConfig.componentName;
   let res = component;
   res = React.memo(res);
   res.staticConfig = staticConfig;
@@ -1188,13 +975,10 @@ If you meant to do this, you can disable this warning - either change untilMeasu
     };
   }
   function styleable(Component2, options) {
-    const skipForwardRef = typeof Component2 === "function" && Component2.length === 1;
-    let out = skipForwardRef ? Component2 : React.forwardRef(Component2);
+    let out = typeof Component2 === "function" && Component2.length === 1 ? Component2 : React.forwardRef(Component2);
     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);
-    }
+    if (extendedConfig.memo || process.env.GUI_MEMOIZE_STYLEABLE) out = React.memo(out);
     out.staticConfig = extendedConfig;
     out.styleable = styleable;
     return out;
@@ -1208,14 +992,10 @@ const fromPx = val => {
   return 0;
 };
 const getCustomRender = (renderProp, content, viewProps, state) => {
-  if (typeof renderProp === "function") {
-    const out = renderProp(viewProps, state);
-    renderProp = getRenderElementForPlatform(out);
-  }
+  if (typeof renderProp === "function") renderProp = getRenderElementForPlatform(renderProp(viewProps, state));
   if (renderProp) {
     if (typeof renderProp === "object" && React.isValidElement(renderProp)) {
-      const renderElement = getRenderElementForPlatform(renderProp);
-      if (renderElement) {
+      if (getRenderElementForPlatform(renderProp)) {
         const elementProps = renderProp.props;
         const mergedProps = elementProps ? mergeRenderElementProps(elementProps, viewProps, content) : viewProps;
         return {
@@ -1227,11 +1007,6 @@ const getCustomRender = (renderProp, content, viewProps, state) => {
   }
 };
 function getRenderElementForPlatform(potential) {
-  if (false) {
-    if (isHTMLElement(potential)) {
-      return;
-    }
-  }
   return potential;
 }
 export { componentSetStates, createComponent };