@hanzogui/web 8.3.0 → 8.3.2

package/dist/cjs/createComponent.js

@@ -0,0 +1,1532 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.componentSetStates = void 0;
+exports.createComponent = createComponent;
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const compose_refs_1 = require("@hanzogui/compose-refs");
+const constants_1 = require("@hanzogui/constants");
+const native_1 = require("@hanzogui/native");
+const helpers_1 = require("@hanzogui/helpers");
+const is_equal_shallow_1 = require("@hanzogui/is-equal-shallow");
+const react_1 = tslib_1.__importStar(require("react"));
+const config_ts_1 = require("./config.js");
+const isDevTools_ts_1 = require("./constants/isDevTools.js");
+const ComponentContext_tsx_1 = require("./contexts/ComponentContext.js");
+const GroupContext_tsx_1 = require("./contexts/GroupContext.js");
+const createVariable_ts_1 = require("./createVariable.js");
+const defaultComponentState_tsx_1 = require("./defaultComponentState.js");
+const eventHandling_ts_1 = require("./eventHandling.js");
+const getDefaultProps_ts_1 = require("./helpers/getDefaultProps.js");
+const resolveAnimationDriver_ts_1 = require("./helpers/resolveAnimationDriver.js");
+const getSplitStyles_tsx_1 = require("./helpers/getSplitStyles.js");
+const log_ts_1 = require("./helpers/log.js");
+const mergeProps_ts_1 = require("./helpers/mergeProps.js");
+const mergeRenderElementProps_ts_1 = require("./helpers/mergeRenderElementProps.js");
+const objectIdentityKey_tsx_1 = require("./helpers/objectIdentityKey.js");
+const pointerEvents_ts_1 = require("./helpers/pointerEvents.js");
+const pseudoTransitions_ts_1 = require("./helpers/pseudoTransitions.js");
+const setElementProps_tsx_1 = require("./helpers/setElementProps.js");
+const subscribeToContextGroup_tsx_1 = require("./helpers/subscribeToContextGroup.js");
+const themeable_tsx_1 = require("./helpers/themeable.js");
+const wrapStyleTags_tsx_1 = require("./helpers/wrapStyleTags.js");
+const useComponentState_ts_1 = require("./hooks/useComponentState.js");
+const useMedia_tsx_1 = require("./hooks/useMedia.js");
+const useTheme_tsx_1 = require("./hooks/useTheme.js");
+const setupHooks_ts_1 = require("./setupHooks.js");
+const Slot_tsx_1 = require("./views/Slot.js");
+const Theme_tsx_1 = require("./views/Theme.js");
+// data-slot: a neutral, standard structural annotation for zero-config analytics.
+// Mirrors shadcn's convention — the component's name, kebab-cased — so a tracker
+// like track.js's `annotate` can capture DOM structure with no per-app config.
+// Only named components carry one (base View/Text/Stack have no componentName),
+// matching shadcn's "named primitives only" rule.
+// Memoized: names come from the fixed set of styled() definitions, so each is
+// kebab-cased once — the render path is then an O(1) hit with no per-render regex.
+// PATCH (ours, carried across the transplant): upstream has no equivalent.
+const dataSlotCache = new Map();
+const dataSlotFor = (name) => {
+    let slot = dataSlotCache.get(name);
+    if (slot === undefined) {
+        slot = name
+            .replace(/([A-Z]+)([A-Z][a-z])/g, '$1-$2')
+            .replace(/([a-z0-9])([A-Z])/g, '$1-$2')
+            .toLowerCase();
+        dataSlotCache.set(name, slot);
+    }
+    return slot;
+};
+/**
+ * All things that need one-time setup after createGui is called
+ */
+let time;
+let debugKeyListeners;
+let startVisualizer;
+exports.componentSetStates = new Set();
+const avoidReRenderKeys = new Set([
+    'hover',
+    'press',
+    'pressIn',
+    'group',
+    'focus',
+    'focusWithin',
+    'media',
+    'group',
+]);
+const groupPseudoKeys = [
+    'disabled',
+    'hover',
+    'press',
+    'pressIn',
+    'focus',
+    'focusVisible',
+    'focusWithin',
+];
+if ("web" !== 'native' && typeof window !== 'undefined') {
+    const cancelPresses = () => {
+        // clear all press downs
+        exports.componentSetStates.forEach((setState) => setState((prev) => {
+            if (prev.press || prev.pressIn) {
+                return {
+                    ...prev,
+                    press: false,
+                    pressIn: false,
+                };
+            }
+            return prev;
+        }));
+        exports.componentSetStates.clear();
+    };
+    const cancelTouches = () => {
+        // clear press and hover on touch end - hover may have been set
+        // via synthetic mouseenter event triggered by touch
+        exports.componentSetStates.forEach((setState) => setState((prev) => {
+            if (prev.press || prev.pressIn || prev.hover) {
+                return {
+                    ...prev,
+                    press: false,
+                    pressIn: false,
+                    hover: false,
+                };
+            }
+            return prev;
+        }));
+        exports.componentSetStates.clear();
+    };
+    addEventListener('mouseup', cancelPresses);
+    addEventListener('touchend', cancelTouches);
+    addEventListener('touchcancel', cancelTouches);
+    // hold option to see debug visualization
+    if (process.env.NODE_ENV === 'development') {
+        startVisualizer = () => {
+            const devVisualizerConfig = config_ts_1.devConfig?.visualizer;
+            if (devVisualizerConfig && !globalThis.__hanzoguiDevVisualizer) {
+                globalThis.__hanzoguiDevVisualizer = true;
+                debugKeyListeners = new Set();
+                let tm;
+                let isShowing = false;
+                let resizeListener = null;
+                const options = {
+                    key: 'Alt',
+                    delay: 800,
+                    ...(typeof devVisualizerConfig === 'object' ? devVisualizerConfig : {}),
+                };
+                function show(val) {
+                    clearTimeout(tm);
+                    isShowing = val;
+                    debugKeyListeners?.forEach((l) => l(val));
+                    // Remove resize listener when hiding
+                    if (!val && resizeListener) {
+                        window.removeEventListener('resize', resizeListener);
+                        resizeListener = null;
+                    }
+                }
+                function cancelShow() {
+                    clearTimeout(tm);
+                    if (resizeListener) {
+                        window.removeEventListener('resize', resizeListener);
+                        resizeListener = null;
+                    }
+                }
+                window.addEventListener('blur', () => {
+                    show(false);
+                });
+                window.addEventListener('keydown', ({ key, metaKey, defaultPrevented }) => {
+                    clearTimeout(tm); // always clear so we dont trigger on chords
+                    if (defaultPrevented)
+                        return;
+                    if (metaKey)
+                        return;
+                    if (key === options.key) {
+                        // Add resize listener immediately when Alt is pressed
+                        if (!resizeListener) {
+                            resizeListener = () => cancelShow();
+                            window.addEventListener('resize', resizeListener);
+                        }
+                        tm = setTimeout(() => {
+                            show(true);
+                        }, options.delay);
+                    }
+                });
+                window.addEventListener('keyup', ({ defaultPrevented }) => {
+                    if (defaultPrevented)
+                        return;
+                    cancelShow();
+                    // any key can clear it
+                    if (isShowing) {
+                        show(false);
+                    }
+                });
+            }
+        };
+    }
+}
+/**
+ * Only on native do we need the actual underlying View/Text
+ * On the web we avoid react-native dep altogether.
+ */
+let BaseText;
+let BaseView;
+let hasSetupBaseViews = false;
+const lastInteractionWasKeyboard = { value: false };
+const lastInteractionWasTouch = { value: false };
+if (constants_1.isWeb && typeof document !== 'undefined') {
+    document.addEventListener('keydown', () => {
+        if (!lastInteractionWasKeyboard.value) {
+            lastInteractionWasKeyboard.value = true;
+        }
+    });
+    document.addEventListener('mousedown', () => {
+        if (lastInteractionWasKeyboard.value) {
+            lastInteractionWasKeyboard.value = false;
+        }
+    });
+    document.addEventListener('mousemove', () => {
+        if (lastInteractionWasKeyboard.value) {
+            lastInteractionWasKeyboard.value = false;
+        }
+        // Real mouse movement clears touch flag
+        lastInteractionWasTouch.value = false;
+    });
+    document.addEventListener('touchstart', () => {
+        lastInteractionWasTouch.value = true;
+    });
+    // Don't reset on touchend - mouseenter fires after touchend
+    // and we need to still detect it as a touch interaction.
+    // Mouse move will reset it when there's real mouse activity.
+}
+function createComponent(staticConfig) {
+    let config = null;
+    const { Component, isText, isHOC } = staticConfig;
+    const component = react_1.default.forwardRef((propsIn, forwardedRef) => {
+        'use no memo';
+        config = config || (0, config_ts_1.getConfig)();
+        const internalID = process.env.NODE_ENV === 'development' ? react_1.default.useId() : '';
+        if (process.env.NODE_ENV === 'development') {
+            if (startVisualizer) {
+                startVisualizer();
+                startVisualizer = undefined;
+            }
+        }
+        if ("web" === 'native') {
+            // todo this could be moved to a cleaner location
+            if (!hasSetupBaseViews) {
+                hasSetupBaseViews = true;
+                const baseViews = setupHooks_ts_1.hooks.getBaseViews?.();
+                if (baseViews) {
+                    BaseText = baseViews.Text;
+                    BaseView = baseViews.View;
+                }
+            }
+        }
+        // test only
+        if (process.env.NODE_ENV === 'test') {
+            const testRenderCount = propsIn['data-test-renders'];
+            if (testRenderCount &&
+                typeof testRenderCount === 'object' &&
+                !Object.isFrozen(testRenderCount)) {
+                testRenderCount.current = testRenderCount.current ?? 0;
+                testRenderCount.current += 1;
+            }
+        }
+        // set variants through context
+        // order is after default props but before props
+        const { context, isReactNative } = staticConfig;
+        const debugProp = propsIn['debug'];
+        const styledContextValue = context
+            ? react_1.default.useContext(context)
+            : undefined;
+        let overriddenContextProps = null;
+        const componentContext = react_1.default.useContext(ComponentContext_tsx_1.ComponentContext);
+        const hasTextAncestor = !!(constants_1.isWeb && isText ? componentContext.inText : false);
+        // On Android, skip RNGH GestureDetector inside native menus (zeego) and use
+        // direct press events instead — GestureDetector consumes touches before they
+        // reach MenuView's native handler, preventing the menu from opening
+        // NativeMenuContext only affects Android RNGH press arbitration inside zeego
+        // menus (see eventHandling.native.ts:182). isAndroid is constant for the whole
+        // app run, so on iOS we skip this context read for every component — the branch
+        // never flips at runtime, so hook order stays stable (rules-of-hooks safe).
+        const isInsideNativeMenu = "web" === 'native' && constants_1.isAndroid
+            ? // eslint-disable-next-line react-hooks/rules-of-hooks
+                react_1.default.useContext(native_1.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();
+            globalThis['time'] = time;
+        }
+        // pick up globalThis.time if set externally (e.g. by a profiling harness)
+        if (process.env.NODE_ENV === 'development' && !time && globalThis.time) {
+            time = globalThis.time;
+        }
+        if (process.env.NODE_ENV === 'development' && time)
+            time `non-hanzogui time (ignore)`;
+        // React inserts default props after your props for some reason...
+        // order important so we do loops, you can't just spread because JS does weird things
+        let props = propsIn;
+        const componentName = props.componentName || staticConfig.componentName;
+        // merge both default props and styled context props - ensure order is preserved
+        const defaultProps = (0, getDefaultProps_ts_1.getDefaultProps)(staticConfig, props.componentName);
+        // merge styled context props over defaults, ensure order is preserved
+        const [nextProps, overrides] = (0, mergeProps_ts_1.mergeComponentProps)(defaultProps, styledContextValue, propsIn);
+        props = nextProps;
+        overriddenContextProps = overrides;
+        if (process.env.NODE_ENV === 'development' && constants_1.isClient) {
+            react_1.default.useEffect(() => {
+                let node;
+                let overlay = null;
+                const remove = () => {
+                    if (overlay) {
+                        try {
+                            overlay.parentNode?.removeChild(overlay);
+                            overlay = null;
+                        }
+                        catch {
+                            // may have unmounted
+                        }
+                    }
+                };
+                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();
+                    }
+                };
+                debugKeyListeners = debugKeyListeners || new Set();
+                debugKeyListeners.add(debugVisualizerHandler);
+                return () => {
+                    remove();
+                    debugKeyListeners?.delete(debugVisualizerHandler);
+                };
+            }, [componentName]);
+        }
+        const groupContextParent = react_1.default.useContext(GroupContext_tsx_1.GroupContext);
+        // Get animation driver - either from animatedBy prop lookup or context/config fallback
+        const animationDriver = (() => {
+            if (props.animatedBy && config) {
+                // check animationDrivers for multi-driver config
+                if (config.animationDrivers) {
+                    return (config.animationDrivers[props.animatedBy] ??
+                        config.animations);
+                }
+                // single driver config - only 'default' makes sense
+                return props.animatedBy === 'default' ? config.animations : null;
+            }
+            // fall back to context driver, then config.animations
+            // resolveAnimationDriver validates it's a real driver (not a raw multi-driver object)
+            return ((0, resolveAnimationDriver_ts_1.resolveAnimationDriver)(componentContext.animationDriver) ??
+                (0, resolveAnimationDriver_ts_1.resolveAnimationDriver)(config?.animations) ??
+                null);
+        })();
+        const useAnimations = animationDriver?.useAnimations;
+        const componentState = (0, useComponentState_ts_1.useComponentState)(props, animationDriver?.isStub ? null : animationDriver, staticConfig, config);
+        const { disabled, groupName, hasAnimationProp, hasEnterStyle, isAnimated, isExiting, isHydrated, presence, presenceState, setState, noClass, state, stateRef, inputStyle, outputStyle, willBeAnimated, willBeAnimatedClient, platformPseudo, startedUnhydrated, } = componentState;
+        if (animationDriver?.avoidReRenders) {
+            // post-commit reconciliation of `nextState` with the committed React state.
+            // `nextState` is the source of truth for the fast `setStateShallow` path; it
+            // must stay populated until React actually commits the corresponding update,
+            // otherwise a follow-up update in the same JS task would read a stale closure
+            // `state` and bail on a false shallow-equal. once committed state matches
+            // `nextState`, clear it. if they diverge (animated components' fast path never
+            // calls into React), flush via componentState.setStateShallow here.
+            (0, constants_1.useIsomorphicLayoutEffect)(() => {
+                // first: refresh the emitter latch while a self pseudo is active. the driver
+                // keeps the last-emitted snapshot latched across re-renders (so an unrelated
+                // render doesn't snap a hovered style back to base), but a render can change
+                // the styles that FEED the pseudo merge — e.g. a row becoming active removes
+                // its hoverStyle while still hovered — and the stale snapshot would keep
+                // painting over the new base (hover-beats-active-during-scrub).
+                // `updateStyleListener` is rebuilt each render over fresh props/state and
+                // reads `nextState || state`, so re-invoking it re-emits the correct merged
+                // style: identical values when the render was truly unrelated (no visual
+                // change), fresh values when it wasn't. gate on the last-EMITTED pseudo state
+                // (prevPseudoState), not React state — React state can lag the emitter by a
+                // commit, and a stale-true `state.hover` here would resurrect a hover the
+                // emitter already cleared. this must run BEFORE the nextState flush below so
+                // the re-emit still sees the freshest pseudo state.
+                const emitted = stateRef.current.prevPseudoState;
+                if (emitted && (emitted.hover || emitted.press || emitted.focus)) {
+                    stateRef.current.updateStyleListener?.();
+                }
+                const pendingState = stateRef.current.nextState;
+                if (!pendingState)
+                    return;
+                stateRef.current.nextState = undefined;
+                if (!(0, is_equal_shallow_1.isEqualShallow)(state, pendingState)) {
+                    componentState.setStateShallow(pendingState);
+                }
+            });
+        }
+        // renderer-driven pseudo states (setupPlatformDriver): the platform resolves
+        // hover natively per hitbox and pushes flips here, replacing the
+        // mouseEnter/mouseLeave lane on such renderers. the flip applies through the
+        // same setStateShallow the event handlers use — under the (driver-opened)
+        // avoidReRenders gate that's the emitter path: zero React commits, animated
+        // per the declared transition or instant by default. press stays on the
+        // responder event path (it must fire onPress anyway); the driver only owns
+        // the hover trigger for now.
+        (0, constants_1.useIsomorphicLayoutEffect)(() => {
+            if (!platformPseudo || props.disabled)
+                return;
+            const pseudoDriver = (0, constants_1.getPlatformDriver)()?.pseudo;
+            const host = stateRef.current.host;
+            if (!pseudoDriver || !host)
+                return;
+            return pseudoDriver.subscribe(host, ({ hovered }) => {
+                stateRef.current.setStateShallow?.({ hover: hovered });
+            });
+        }, [platformPseudo, props.disabled]);
+        // create new context with groups, or else sublings will grab the same one
+        const allGroupContexts = (0, react_1.useMemo)(() => {
+            if (!groupName || props.passThrough) {
+                return groupContextParent;
+            }
+            const listeners = new Set();
+            stateRef.current.group?.listeners?.clear();
+            stateRef.current.group = {
+                listeners,
+                emit(state) {
+                    listeners.forEach((l) => l(state));
+                },
+                subscribe(cb) {
+                    listeners.add(cb);
+                    if (listeners.size === 1) {
+                        setStateShallow({ hasDynGroupChildren: true });
+                    }
+                    return () => {
+                        listeners.delete(cb);
+                        if (listeners.size === 0) {
+                            setStateShallow({ hasDynGroupChildren: false });
+                        }
+                    };
+                },
+            };
+            return {
+                ...groupContextParent,
+                [groupName]: {
+                    state: {
+                        pseudo: defaultComponentState_tsx_1.defaultComponentStateMounted,
+                    },
+                    subscribe: (listener) => {
+                        const dispose = stateRef.current.group?.subscribe(listener);
+                        return () => {
+                            dispose?.();
+                        };
+                    },
+                },
+            };
+        }, [stateRef, groupName, groupContextParent]);
+        // if our animation driver supports avoidReRenders, we'll replace this below with
+        // a version that essentially uses an internall emitter rather than setting state
+        // but still stores the current state and applies if it it needs to during render
+        let setStateShallow = componentState.setStateShallow;
+        if (process.env.NODE_ENV === 'development' && time)
+            time `use-state`;
+        // web-only - string-style not valid for native
+        const renderProp = props.render;
+        const isRenderString = !Component || typeof Component === 'string';
+        // default to render prop, fallback to component (when both strings)
+        const element = constants_1.isWeb
+            ? isRenderString
+                ? renderProp || Component
+                : Component
+            : Component;
+        const BaseTextComponent = BaseText || element || 'span';
+        const BaseViewComponent = BaseView || element || (hasTextAncestor ? 'span' : 'div');
+        const BaseComponent = isText ? BaseTextComponent : BaseViewComponent;
+        let elementType = BaseComponent;
+        const isAnimatedCustomComponent = animationDriver && isAnimated && animationDriver.needsCustomComponent;
+        if (isAnimatedCustomComponent) {
+            elementType = animationDriver[isText ? 'Text' : 'View'] || elementType;
+        }
+        // internal use only
+        const disableThemeProp = "web" === 'native' ? false : props['data-disable-theme'];
+        const disableTheme = disableThemeProp || isHOC;
+        if (process.env.NODE_ENV === 'development' && time)
+            time `theme-props`;
+        const themeStateProps = {
+            componentName,
+            disable: disableTheme,
+            shallow: props.themeShallow,
+            debug: debugProp,
+            unstyled: props.unstyled,
+        };
+        // this is set conditionally if existing in props because we wrap children with
+        // a span if they ever set one of these, so avoid wrapping all children with span
+        if ('theme' in props) {
+            themeStateProps.name = props.theme;
+        }
+        // Always set needsUpdate callback so it can check the ref's latest value
+        // This ensures components with $theme-dark/$theme-light re-render on theme change
+        // even when using raw colors (not tokens) since isListeningToTheme is set after useSplitStyles
+        themeStateProps.needsUpdate = () => !!stateRef.current.isListeningToTheme;
+        // on native we optimize theme changes if fastSchemeChange is enabled, otherwise deopt
+        if ("web" === 'native') {
+            themeStateProps.deopt = willBeAnimated;
+        }
+        if (process.env.NODE_ENV === 'development') {
+            if (debugProp && debugProp !== 'profile') {
+                const name = `${componentName ||
+                    Component?.displayName ||
+                    Component?.name ||
+                    '[Unnamed Component]'}`;
+                const type = (hasEnterStyle ? '(hasEnter)' : ' ') +
+                    (isAnimated ? '(animated)' : ' ') +
+                    (isReactNative ? '(rnw)' : ' ') +
+                    (noClass ? '(noClass)' : ' ') +
+                    (state.press || state.pressIn ? '(PRESSED)' : ' ') +
+                    (state.hover ? '(HOVERED)' : ' ') +
+                    (state.focus ? '(FOCUSED)' : ' ') +
+                    (state.focusWithin ? '(WITHIN FOCUSED)' : ' ') +
+                    (presenceState?.isPresent === false ? '(EXIT)' : '');
+                const dataIs = propsIn['data-is'] || '';
+                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 (constants_1.isWeb) {
+                    console.info(`%c ${banner}`, 'background: green; color: white;');
+                    if (constants_1.isServer) {
+                        (0, log_ts_1.log)({ noClass, isAnimated, isWeb: constants_1.isWeb, inputStyle });
+                    }
+                    else {
+                        // if strict mode or something messes with our nesting this fixes:
+                        console.groupEnd();
+                        console.groupCollapsed(`${childLog} [inspect props, state, context 👇]`);
+                        (0, log_ts_1.log)('props in:', propsIn);
+                        (0, log_ts_1.log)('final props:', props, Object.keys(props));
+                        (0, log_ts_1.log)({ state, staticConfig, elementType, themeStateProps });
+                        (0, log_ts_1.log)({
+                            context,
+                            overriddenContextProps,
+                            componentContext,
+                        });
+                        (0, log_ts_1.log)({ presence, isAnimated, isHOC, hasAnimationProp, useAnimations });
+                        console.groupEnd();
+                    }
+                }
+                else {
+                    console.info(`\n\n------------------------------\n${banner}\n------------------------------\n`);
+                    (0, log_ts_1.log)(`children:`, props.children);
+                    (0, log_ts_1.log)({ overriddenContextProps, styledContextValue });
+                    (0, log_ts_1.log)({ noClass, isAnimated, isWeb: constants_1.isWeb, inputStyle });
+                }
+            }
+        }
+        if (process.env.NODE_ENV === 'development' && time)
+            time `pre-theme-media`;
+        const [theme, themeState] = (0, useTheme_tsx_1.useThemeWithState)(themeStateProps);
+        if (process.env.NODE_ENV === 'development' && time)
+            time `theme`;
+        elementType = element || elementType;
+        const isStringElement = typeof elementType === 'string';
+        const mediaState = (0, useMedia_tsx_1.useMedia)(componentContext, debugProp);
+        (0, createVariable_ts_1.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,
+            isExiting,
+            isAnimated,
+            willBeAnimated,
+            styledContext: styledContextValue,
+        };
+        const themeName = themeState?.name || '';
+        if (process.env.NODE_ENV === 'development' && time)
+            time `split-styles-prepare`;
+        const splitStyles = (0, getSplitStyles_tsx_1.useSplitStyles)(props, staticConfig, theme, themeName, state, styleProps, null, componentContext, allGroupContexts, elementType, startedUnhydrated, debugProp, animationDriver);
+        const isPassthrough = !splitStyles;
+        // splitStyles === null === passThrough
+        // Merge style-resolved context overrides (issues #3670, #3676)
+        // When styles set values that are also context keys (from variants, pseudos, media, etc),
+        // we need to add them to overriddenContextProps so they propagate to children
+        // Use either the component's own context or its parent's context (for styled() inheritance)
+        let contextForOverride = staticConfig.context;
+        if (splitStyles?.overriddenContextProps) {
+            const contextForProps = staticConfig.context || staticConfig.parentStaticConfig?.context;
+            if (contextForProps) {
+                for (const key in splitStyles.overriddenContextProps) {
+                    overriddenContextProps = overriddenContextProps || {};
+                    overriddenContextProps[key] = splitStyles.overriddenContextProps[key];
+                }
+                // Use parent's context if this component doesn't have its own
+                if (!staticConfig.context) {
+                    contextForOverride = contextForProps;
+                }
+            }
+        }
+        const groupContext = groupName ? allGroupContexts?.[groupName] || null : null;
+        // one tiny mutation 🙏 get width/height optimistically from raw values if possible
+        // if set hardcoded it avoids extra renders
+        if (!isPassthrough &&
+            groupContext &&
+            // avoids onLayout if we don't need it
+            props.containerType !== 'normal') {
+            const groupState = groupContext?.state;
+            if (groupState && groupState.layout === undefined) {
+                if (splitStyles.style?.width || splitStyles.style?.height) {
+                    groupState.layout = {
+                        width: fromPx(splitStyles.style.width),
+                        height: fromPx(splitStyles.style.height),
+                    };
+                }
+            }
+        }
+        // avoids re-rendering if animation driver supports it
+        // TODO believe we need to set some sort of "pendingState" in case it re-renders
+        // CRITICAL: Skip avoidReRenders for components with enter/exit transitions
+        // The exit state comes from AnimatePresence context, not local state, so
+        // updateStyleListener can fire before the component re-renders with the new
+        // presence value, causing wrong animation timing (e.g., using enter timing for exit)
+        const hasEnterExitTransition = props.transition &&
+            typeof props.transition === 'object' &&
+            !Array.isArray(props.transition) &&
+            ('enter' in props.transition || 'exit' in props.transition);
+        if (!isPassthrough &&
+            (hasAnimationProp || groupName || platformPseudo) &&
+            animationDriver?.avoidReRenders &&
+            !hasEnterExitTransition) {
+            const ogSetStateShallow = setStateShallow;
+            stateRef.current.updateStyleListener = () => {
+                const useStyleListener = stateRef.current.useStyleListener;
+                // if no animation driver is listening for style updates, fall back to normal re-render
+                // this happens when a component has group prop but no transition/animation prop.
+                // keep nextState populated until React actually commits the update — clearing it
+                // here lets a subsequent setStateShallow in the same JS task (e.g. press-out
+                // right after press-in) compare against a stale closure `state` and bail out,
+                // losing the update. the post-commit layoutEffect below clears nextState once
+                // React state has caught up.
+                if (!useStyleListener) {
+                    const pendingState = stateRef.current.nextState;
+                    if (pendingState) {
+                        ogSetStateShallow(pendingState);
+                    }
+                    return;
+                }
+                const updatedState = stateRef.current.nextState || state;
+                const mediaState = stateRef.current.nextMedia;
+                const nextStyles = (0, getSplitStyles_tsx_1.getSplitStyles)(props, staticConfig, theme, themeName, updatedState, mediaState ? { ...styleProps, mediaState } : styleProps, null, componentContext, allGroupContexts, elementType, startedUnhydrated, debugProp, animationDriver);
+                // compute effective transition based on entering/exiting pseudo states
+                const effectiveTransition = (0, pseudoTransitions_ts_1.resolveEffectivePseudoTransition)(stateRef.current.prevPseudoState, updatedState, nextStyles?.pseudoTransitions, 
+                // platform-pseudo with no declared transition = instant (CSS :hover semantics)
+                props.transition ?? (platformPseudo ? '0ms' : undefined));
+                // update prev state for next comparison (includes group states)
+                stateRef.current.prevPseudoState = (0, pseudoTransitions_ts_1.extractPseudoState)(updatedState);
+                // a self pseudo being active means the emitted style is a transient hover/press/focus
+                // override (it's not in React state under avoidReRenders), so the worklet must keep it
+                // latched across incidental re-renders; when none is active this is the base and renders
+                // own it again.
+                const hasActivePseudo = Boolean(updatedState.hover ||
+                    updatedState.press ||
+                    updatedState.pressIn ||
+                    updatedState.focus ||
+                    updatedState.focusWithin);
+                useStyleListener((nextStyles?.style || {}), effectiveTransition, hasActivePseudo);
+            };
+            function updateGroupListeners() {
+                const updatedState = stateRef.current.nextState;
+                if (groupContext) {
+                    const { group, hasDynGroupChildren, unmounted, transition, ...childrenGroupState } = updatedState;
+                    notifyGroupSubscribers(groupContext, stateRef.current.group || null, childrenGroupState);
+                }
+            }
+            // don't change this ever or else you break ComponentContext and cause re-rendering
+            // use a Set of listeners so multiple components can register
+            componentContext.mediaEmitListeners =
+                componentContext.mediaEmitListeners || new Set();
+            // only register once per component instance
+            if (!stateRef.current.mediaEmitCleanup) {
+                const updateListener = (next) => {
+                    stateRef.current.nextMedia = next;
+                    stateRef.current.updateStyleListener?.();
+                };
+                componentContext.mediaEmitListeners.add(updateListener);
+                stateRef.current.mediaEmitCleanup = () => {
+                    componentContext.mediaEmitListeners?.delete(updateListener);
+                };
+            }
+            componentContext.mediaEmit =
+                componentContext.mediaEmit ||
+                    ((next) => {
+                        // notify all registered components
+                        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 || (0, is_equal_shallow_1.isEqualShallow)(prev, next)) {
+                    return;
+                }
+                // one thing we have to handle here and where it gets a bit more complex is group styles
+                const canAvoidReRender = Object.keys(next).every((key) => avoidReRenderKeys.has(key));
+                const updatedState = {
+                    ...prev,
+                    ...next,
+                };
+                stateRef.current.nextState = updatedState;
+                if (canAvoidReRender) {
+                    if (process.env.NODE_ENV === 'development' &&
+                        debugProp &&
+                        debugProp !== 'profile') {
+                        console.groupCollapsed(`[⚡️] avoid setState`, componentName, next, {
+                            updatedState,
+                            props,
+                        });
+                        console.info(stateRef.current.host);
+                        console.groupEnd();
+                    }
+                    updateGroupListeners();
+                    stateRef.current.updateStyleListener?.();
+                }
+                else {
+                    if (process.env.NODE_ENV === 'development' &&
+                        debugProp &&
+                        debugProp !== 'profile') {
+                        console.info(`[🐌] re-render`, { canAvoidReRender, next });
+                    }
+                    ogSetStateShallow(next);
+                }
+            };
+            // needs to capture latest props (it's called from memoized `events`)
+            setStateShallow = (state) => {
+                stateRef.current.setStateShallow?.(state);
+            };
+        }
+        if (process.env.NODE_ENV === 'development' && time)
+            time `split-styles`;
+        // hide strategy will set this opacity = 0 until measured
+        if (splitStyles) {
+            if (props.group &&
+                props.untilMeasured === 'hide' &&
+                !stateRef.current.hasMeasured) {
+                splitStyles.style = splitStyles.style || {};
+                splitStyles.style.opacity = 0;
+            }
+            if (splitStyles.dynamicThemeAccess != null) {
+                stateRef.current.isListeningToTheme = splitStyles.dynamicThemeAccess;
+            }
+        }
+        // only listen for changes if we are using raw theme values or media space, or dynamic media (native)
+        // array = space media breakpoints
+        const hasRuntimeMediaKeys = splitStyles?.hasMedia && splitStyles.hasMedia !== true;
+        const shouldListenForMedia = (0, createVariable_ts_1.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);
+        }
+        (0, useMedia_tsx_1.setMediaShouldUpdate)(componentContext, shouldListenForMedia, mediaListeningKeys);
+        const { viewProps: viewPropsIn, pseudos, style: splitStylesStyle, classNames, pseudoGroups, mediaGroups, } = splitStyles || {};
+        const propsWithAnimation = props;
+        const { asChild, children, themeShallow, spaceDirection: _spaceDirection, onPress, onLongPress, onPressIn, onPressOut, onHoverIn, onHoverOut, onMouseUp, onMouseDown, onMouseEnter, onMouseLeave, onFocus, onBlur, onDidAnimate, separator, 
+        // ignore from here on out
+        passThrough, forceStyle: _forceStyle, 
+        // @ts-ignore  for next/link compat etc
+        onClick, theme: _themeProp, ...nonGuiProps } = viewPropsIn || {};
+        // these can ultimately be for DOM, react-native-web views, or animated views
+        // so the type is pretty loose
+        let viewProps = nonGuiProps;
+        if (props.forceStyle) {
+            viewProps.forceStyle = props.forceStyle;
+        }
+        if (isHOC) {
+            if (typeof _themeProp !== 'undefined') {
+                viewProps.theme = _themeProp;
+            }
+            if (typeof passThrough !== 'undefined') {
+                viewProps.passThrough = passThrough;
+            }
+        }
+        // once you set animation prop don't remove it, you can set to undefined/false
+        // reason is animations are heavy - no way around it, and must be run inline here (🙅 loading as a sub-component)
+        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;
+        let animatedRef;
+        if (shouldUseAnimation) {
+            const useStyleEmitter = animationDriver?.avoidReRenders
+                ? (listener) => {
+                    stateRef.current.useStyleListener = listener;
+                }
+                : undefined;
+            // compute effective transition once here (single source of truth)
+            // avoidReRenders path also computes this in updateStyleListener
+            const effectiveTransition = (0, pseudoTransitions_ts_1.resolveEffectivePseudoTransition)(stateRef.current.prevPseudoState, state, splitStyles?.pseudoTransitions, 
+            // platform-pseudo with no declared transition = instant (CSS :hover semantics)
+            props.transition ?? (platformPseudo ? '0ms' : undefined));
+            // add effectiveTransition to splitStyles for drivers to consume
+            if (splitStyles) {
+                splitStyles.effectiveTransition = effectiveTransition;
+            }
+            // update prev state for next comparison (needed for non-avoidReRenders drivers like CSS)
+            // avoidReRenders path also updates this in updateStyleListener
+            stateRef.current.prevPseudoState = (0, pseudoTransitions_ts_1.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,
+                componentState: state,
+                styleProps,
+                theme,
+                themeName,
+                pseudos: pseudos || null,
+                staticConfig,
+                stateRef,
+                onDidAnimate,
+            });
+            if (animations) {
+                if (animations.ref) {
+                    // @ts-ignore
+                    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 (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.\n\nIf you meant to do this, you can disable this warning - either change untilMeasured and group at the same time, or do group={conditional ? 'name' : undefined}`);
+        }
+        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 = (0, helpers_1.composeEventHandlers)(nonGuiProps.onLayout, (e) => {
+                // one off update here
+                const layout = e.nativeEvent.layout;
+                groupContext.state.layout = layout;
+                stateRef.current.group?.emit({
+                    layout,
+                });
+                // force re-render if measure strategy is hide
+                if (!stateRef.current.hasMeasured && props.untilMeasured === 'hide') {
+                    setState((prev) => ({ ...prev }));
+                }
+                stateRef.current.hasMeasured = true;
+            });
+        }
+        viewProps =
+            setupHooks_ts_1.hooks.usePropsTransform?.(elementType, nonGuiProps, stateRef, stateRef.current.willHydrate) || nonGuiProps;
+        if (!stateRef.current.composedRef) {
+            stateRef.current.composedRef = (0, compose_refs_1.composeRefs)((x) => (stateRef.current.host = x), forwardedRef, setElementProps_tsx_1.setElementProps, animatedRef);
+        }
+        viewProps.ref = stateRef.current.composedRef;
+        // handle pointer events (native: maps to touch events, web: no-op)
+        (0, pointerEvents_ts_1.usePointerEvents)(props, viewProps);
+        if (process.env.NODE_ENV === 'development') {
+            if (!isReactNative && !isText && constants_1.isWeb && !isHOC) {
+                react_1.default.Children.toArray(props.children).forEach((item) => {
+                    // allow newlines because why not its annoying with mdx
+                    if (typeof item === 'string' && item !== '\n') {
+                        console.error(`Unexpected text node: ${item}. A text node cannot be a child of a <${staticConfig.componentName || propsIn.tag || 'View'}>.`, props);
+                    }
+                });
+            }
+        }
+        if (process.env.NODE_ENV === 'development' && time)
+            time `events-hooks`;
+        const unPress = () => {
+            setStateShallow({ press: false, pressIn: false });
+        };
+        if (process.env.NODE_ENV === 'development' && constants_1.isWeb) {
+            (0, constants_1.useIsomorphicLayoutEffect)(() => {
+                if (debugProp === 'verbose') {
+                    function cssStyleDeclarationToObject(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();
+                }
+            });
+        }
+        // Animation enter state machine: true -> 'should-enter' -> false
+        // Stage 1: Set 'should-enter' synchronously before paint to apply enterStyle classes
+        // Stage 2: After browser paint, set false to trigger CSS transition
+        //
+        // CRITICAL: useEffect does NOT guarantee post-paint execution!
+        // See: https://thoughtspile.github.io/2021/11/15/unintentional-layout-effect/
+        // When layoutEffect updates state → re-render before paint → useEffect flushes pre-paint
+        // Solution: Double RAF ensures browser has actually painted before we transition
+        (0, constants_1.useIsomorphicLayoutEffect)(() => {
+            if (state.unmounted === true && hasEnterStyle) {
+                setStateShallow({ unmounted: 'should-enter' });
+                return;
+            }
+            if (state.unmounted) {
+                // For CSS transitions, we need browser to paint enterStyle before removing it.
+                // Double RAF guarantees paint: first RAF schedules after current frame,
+                // second RAF schedules after that frame completes (including paint).
+                if (inputStyle === 'css') {
+                    let cancelled = false;
+                    requestAnimationFrame(() => {
+                        if (cancelled)
+                            return;
+                        requestAnimationFrame(() => {
+                            if (cancelled)
+                                return;
+                            setStateShallow({ unmounted: false });
+                        });
+                    });
+                    return () => {
+                        cancelled = true;
+                    };
+                }
+                // Non-CSS drivers handle their own animation timing
+                setStateShallow({ unmounted: false });
+            }
+            return () => {
+                exports.componentSetStates.delete(setState);
+                stateRef.current.mediaEmitCleanup?.();
+            };
+        }, [state.unmounted, inputStyle]);
+        (0, constants_1.useIsomorphicLayoutEffect)(() => {
+            if (disabled)
+                return;
+            if (!pseudoGroups && !mediaGroups)
+                return;
+            if (!allGroupContexts)
+                return;
+            return (0, subscribeToContextGroup_tsx_1.subscribeToContextGroup)({
+                groupContext: allGroupContexts,
+                setStateShallow,
+                mediaGroups,
+                pseudoGroups,
+            });
+        }, [
+            allGroupContexts,
+            disabled,
+            pseudoGroups ? (0, objectIdentityKey_tsx_1.objectIdentityKey)(pseudoGroups) : 0,
+            mediaGroups ? (0, objectIdentityKey_tsx_1.objectIdentityKey)(mediaGroups) : 0,
+        ]);
+        const groupEmitter = stateRef.current.group;
+        (0, constants_1.useIsomorphicLayoutEffect)(() => {
+            if (!groupContext || !groupEmitter)
+                return;
+            notifyGroupSubscribers(groupContext, groupEmitter, state);
+        }, [groupContext, groupEmitter, state]);
+        // if its a group its gotta listen for pseudos to emit them to children
+        const runtimePressStyle = !disabled && noClass && pseudos?.pressStyle;
+        const runtimeFocusStyle = !disabled && noClass && pseudos?.focusStyle;
+        const runtimeFocusVisibleStyle = !disabled && noClass && pseudos?.focusVisibleStyle;
+        const attachFocus = Boolean(runtimePressStyle ||
+            runtimeFocusStyle ||
+            runtimeFocusVisibleStyle ||
+            onFocus ||
+            onBlur ||
+            !!componentContext.setParentFocusState);
+        const hasDynamicGroupChildren = Boolean(groupName && state.hasDynGroupChildren);
+        const attachPress = Boolean(hasDynamicGroupChildren ||
+            runtimePressStyle ||
+            onPress ||
+            onPressOut ||
+            onPressIn ||
+            onMouseDown ||
+            onMouseUp ||
+            onLongPress ||
+            onClick ||
+            pseudos?.focusVisibleStyle);
+        const runtimeHoverStyle = !disabled && noClass && pseudos?.hoverStyle;
+        // with a platform pseudo driver the hover STATE is driver-sourced; only keep
+        // the JS hover listeners when something else needs them (dynamic group
+        // children, or the user's own onMouseEnter/Leave handlers below).
+        const needsHoverState = Boolean(hasDynamicGroupChildren || (runtimeHoverStyle && !platformPseudo));
+        const attachHover = (constants_1.isWeb || constants_1.isNativeDesktop) &&
+            !!(hasDynamicGroupChildren || needsHoverState || onMouseEnter || onMouseLeave);
+        // check presence rather than value to prevent reparenting bugs
+        // allows for onPress={x ? function : undefined} without re-ordering dom
+        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') {
+            (0, log_ts_1.log)(`🪩 events()`, {
+                runtimeFocusStyle,
+                runtimePressStyle,
+                runtimeHoverStyle,
+                runtimeFocusVisibleStyle,
+                attachPress,
+                attachFocus,
+                attachHover,
+                shouldAttach,
+                needsHoverState,
+                pseudos,
+            });
+        }
+        const events = shouldAttach
+            ? {
+                onPressOut: attachPress
+                    ? (e) => {
+                        unPress();
+                        onPressOut?.(e);
+                        onMouseUp?.(e);
+                    }
+                    : undefined,
+                ...((attachHover || attachPress) && {
+                    onMouseEnter: (e) => {
+                        const next = {};
+                        // Don't set hover on touch devices - touch triggers mouseenter
+                        // but there's no corresponding mouseleave on touch end
+                        if (needsHoverState && !lastInteractionWasTouch.value) {
+                            next.hover = true;
+                        }
+                        if (needsPressState) {
+                            if (state.pressIn) {
+                                next.press = true;
+                            }
+                        }
+                        setStateShallow(next);
+                        onHoverIn?.(e);
+                        onMouseEnter?.(e);
+                    },
+                    onMouseLeave: (e) => {
+                        const next = {};
+                        if (needsHoverState) {
+                            next.hover = false;
+                        }
+                        if (needsPressState) {
+                            next.press = false;
+                            next.pressIn = false;
+                        }
+                        setStateShallow(next);
+                        onHoverOut?.(e);
+                        onMouseLeave?.(e);
+                    },
+                }),
+                onPressIn: attachPress
+                    ? (e) => {
+                        if (needsPressState) {
+                            setStateShallow({
+                                press: true,
+                                pressIn: true,
+                            });
+                        }
+                        onPressIn?.(e);
+                        onMouseDown?.(e);
+                        if (constants_1.isWeb) {
+                            exports.componentSetStates.add(setState);
+                        }
+                    }
+                    : undefined,
+                onPress: attachPress
+                    ? (e) => {
+                        unPress();
+                        if ("web" === 'web') {
+                            // @ts-ignore
+                            onClick?.(e);
+                            // matches RN pressable behavior - only when an explicit press
+                            // handler is set, so pressStyle alone doesn't swallow clicks
+                            if (onPress || onClick) {
+                                e.stopPropagation();
+                            }
+                        }
+                        onPress?.(e);
+                        if ("web" === 'web') {
+                            onLongPress?.(e);
+                        }
+                    }
+                    : undefined,
+                ...("web" === 'native' &&
+                    attachPress &&
+                    onLongPress && {
+                    onLongPress: (e) => {
+                        unPress();
+                        onLongPress?.(e);
+                    },
+                }),
+                ...(attachFocus && {
+                    onFocus: (e) => {
+                        const next = {};
+                        if (componentContext.setParentFocusState) {
+                            componentContext.setParentFocusState({ focusWithin: true });
+                            next.focusWithin = true;
+                        }
+                        if (pseudos?.focusVisibleStyle) {
+                            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 });
+                        }
+                        setStateShallow({
+                            focus: false,
+                            focusVisible: false,
+                            focusWithin: false,
+                        });
+                        onBlur?.(e);
+                    },
+                }),
+            }
+            : null;
+        if ("web" === 'native' && events && !asChild) {
+            // replicating TouchableWithoutFeedback
+            Object.assign(events, {
+                cancelable: !viewProps.rejectResponderTermination,
+                disabled: disabled,
+                hitSlop: viewProps.hitSlop,
+                delayLongPress: viewProps.delayLongPress,
+                delayPressIn: viewProps.delayPressIn,
+                delayPressOut: viewProps.delayPressOut,
+                focusable: viewProps.focusable ?? true,
+                minPressDuration: 0,
+            });
+        }
+        if ("web" === 'web' && events && !isReactNative) {
+            Object.assign(viewProps, (0, eventHandling_ts_1.getWebEvents)(events));
+        }
+        if (process.env.NODE_ENV === 'development' && time)
+            time `events`;
+        if (process.env.NODE_ENV === 'development' && debugProp === 'verbose') {
+            (0, log_ts_1.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;
+        // EVENTS native - handles focus/blur, input special cases, and RNGH press handling
+        // Skip gesture setup for HOC components - they may return null which crashes GestureDetector
+        // hasRealPressEvents distinguishes user-provided handlers from events.onPress
+        // synthesized for pressStyle alone — only the former should claim the responder.
+        const hasRealPressEvents = !!(onPress || onPressIn || onPressOut || onLongPress);
+        const pressGesture = "web" === 'native'
+            ? (0, eventHandling_ts_1.useEvents)(events, viewProps, stateRef, staticConfig, isHOC, isInsideNativeMenu, pressDebugName, hasRealPressEvents)
+            : null;
+        if (process.env.NODE_ENV === 'development' && time)
+            time `hooks`;
+        if (asChild) {
+            elementType = Slot_tsx_1.Slot;
+            // on native this is already merged into viewProps in useEvents
+            if ("web" === 'web') {
+                const webStyleEvents = asChild === 'web' || asChild === 'except-style-web';
+                const passEvents = (0, eventHandling_ts_1.getWebEvents)({
+                    onPress,
+                    onLongPress,
+                    onPressIn,
+                    onPressOut,
+                    onMouseUp,
+                    onMouseDown,
+                    onMouseEnter,
+                    onMouseLeave,
+                }, webStyleEvents);
+                Object.assign(viewProps, passEvents);
+            }
+            else {
+                Object.assign(viewProps, { onPress, onLongPress });
+            }
+        }
+        if (process.env.NODE_ENV === 'development' && time)
+            time `spaced-as-child`;
+        // Stamp a neutral, standard structural annotation (data-slot) on the web host
+        // node so analytics can self-describe with zero app config. Named components
+        // only; overridable — passing your own `data-slot` (any value) opts out.
+        // No-op on native (isWeb compiles to false there). asChild flows via Slot,
+        // which merges viewProps onto the child host, so it is covered too.
+        if (constants_1.isWeb && componentName && !('data-slot' in viewProps)) {
+            viewProps['data-slot'] = dataSlotFor(componentName);
+        }
+        let content;
+        if (isPassthrough) {
+            // avoid re-parenting but avoid layout changes
+            content = react_1.default.createElement(BaseComponent, {
+                style: {
+                    display: 'contents',
+                },
+            }, propsIn.children);
+        }
+        else {
+            // here elementType is either the custom animated driver view, or base view
+            if (setupHooks_ts_1.hooks.useChildren) {
+                // ONLY native:
+                content = setupHooks_ts_1.hooks.useChildren(elementType, content || children, viewProps);
+            }
+            const isRenderPropString = typeof renderProp === 'string';
+            // this ONLY handles the case where render is NOT a string
+            // either direct JSX, or a function that returns JSX, we always clone
+            if (renderProp && !isRenderPropString) {
+                const out = getCustomRender(renderProp, content || children, viewProps, componentState);
+                if (out) {
+                    viewProps = out.viewProps;
+                    elementType = out.elementType;
+                }
+            }
+            if (!content) {
+                // web-only, handle render === string passing to custom animated component
+                if (isRenderPropString) {
+                    viewProps.render === renderProp;
+                }
+                content = react_1.default.createElement(elementType, viewProps, content || children);
+            }
+            if (process.env.NODE_ENV === 'development' && time)
+                time `use-children`;
+        }
+        // wrap with GestureDetector for RNGH press handling (native only, no-op on web)
+        // Skip for HOC and composite components - they pass press events to inner component instead
+        if ("web" === 'native') {
+            const isCompositeComponent = !isHOC && Component && typeof Component !== 'string';
+            content = (0, eventHandling_ts_1.wrapWithGestureDetector)(content, pressGesture, stateRef, isHOC, isCompositeComponent, hasRealPressEvents);
+        }
+        // needs to reset the presence state for nested children
+        // Use the resolved animationDriver (handles multi-driver config)
+        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));
+        // avoid re-parenting
+        const hasEverReset = stateRef.current.hasEverResetPresence;
+        if (needsReset && !hasEverReset) {
+            stateRef.current.hasEverResetPresence = true;
+        }
+        const renderReset = needsReset || hasEverReset;
+        if (renderReset && ResetPresence) {
+            content = (0, jsx_runtime_1.jsx)(ResetPresence, { disabled: !needsReset, children: content });
+        }
+        if (process.env.NODE_ENV === 'development' && time)
+            time `create-element`;
+        if ('focusWithinStyle' in propsIn || pseudos?.focusWithinStyle) {
+            content = ((0, jsx_runtime_1.jsx)(ComponentContext_tsx_1.ComponentContext.Provider, { ...componentContext, setParentFocusState: setStateShallow, children: content }));
+        }
+        if ('group' in props) {
+            content = ((0, jsx_runtime_1.jsx)(GroupContext_tsx_1.GroupContext.Provider, { value: allGroupContexts, children: content }));
+        }
+        // Text components set inText context for children so nested Text can inherit styles
+        if ("web" === 'web' && !asChild && isText && !hasTextAncestor) {
+            content = ((0, jsx_runtime_1.jsx)(ComponentContext_tsx_1.ComponentContext.Provider, { ...componentContext, inText: true, children: content }));
+        }
+        if (process.env.NODE_ENV === 'development' && time)
+            time `group-context`;
+        content =
+            disableTheme || !splitStyles
+                ? content
+                : (0, Theme_tsx_1.getThemedChildren)(themeState, content, themeStateProps, false, stateRef);
+        if (process.env.NODE_ENV === 'development' && time)
+            time `themed-children`;
+        if ("web" === 'web') {
+            if (isReactNative && !asChild) {
+                content = ((0, jsx_runtime_1.jsx)("span", { className: "_dsp_contents", ...(!isPassthrough && isHydrated && events && (0, eventHandling_ts_1.getWebEvents)(events)), children: content }));
+            }
+        }
+        if (overriddenContextProps && contextForOverride) {
+            const Provider = contextForOverride.Provider;
+            // make sure we re-order styled context keys based on how we pass them here:
+            for (const key in styledContextValue) {
+                if (!(key in overriddenContextProps)) {
+                    overriddenContextProps[key] = styledContextValue[key];
+                }
+            }
+            content = ((0, jsx_runtime_1.jsx)(Provider, { __disableMergeDefaultValues: true, ...overriddenContextProps, children: content }));
+        }
+        if (process.env.NODE_ENV === 'development' && time)
+            time `context-override`;
+        // SSR style support - for non compiled styles we render them inline until client takes over
+        // on client we then switch over to our global sheet insert, because rendering inline is expensive
+        if ("web" === 'web' && startedUnhydrated && splitStyles) {
+            content = ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [content, !isHydrated ? (0, wrapStyleTags_tsx_1.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 element = typeof elementType === 'string' ? elementType : 'Component';
+                const title = `render <${element} /> (${internalID}) with props`;
+                if (!constants_1.isWeb || !constants_1.isClient) {
+                    (0, log_ts_1.log)(title);
+                    (0, log_ts_1.log)(`state: `, state);
+                    if (isDevTools_ts_1.isDevTools) {
+                        (0, log_ts_1.log)('viewProps', viewProps);
+                    }
+                    (0, log_ts_1.log)(`final styles:`);
+                    for (const key in splitStylesStyle) {
+                        (0, log_ts_1.log)(key, splitStylesStyle[key]);
+                    }
+                }
+                else {
+                    console.groupCollapsed(title);
+                    try {
+                        (0, log_ts_1.log)('viewProps', viewProps);
+                        (0, log_ts_1.log)('children', content);
+                        if (typeof window !== 'undefined') {
+                            (0, log_ts_1.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 {
+                        // RN can run into PayloadTooLargeError: request entity too large
+                    }
+                    finally {
+                        console.groupEnd();
+                    }
+                }
+                if (debugProp === 'break') {
+                    // debugger intentionally here for debugging
+                }
+            }
+        }
+        if (process.env.NODE_ENV === 'development' && time) {
+            time `rest`;
+            if (!globalThis['willPrint']) {
+                globalThis['willPrint'] = true;
+                setTimeout(() => {
+                    delete globalThis['willPrint'];
+                    time.print();
+                    time = null;
+                }, 50);
+            }
+        }
+        return content;
+    });
+    function notifyGroupSubscribers(groupContext, groupEmitter, pseudo) {
+        if (!groupContext || !groupEmitter) {
+            return;
+        }
+        const prevPseudo = groupContext.state.pseudo;
+        const shouldReplacePseudo = !prevPseudo ||
+            // old/default state objects carry non-pseudo fields; replace once instead
+            // of mutating the shared defaultComponentStateMounted object
+            'unmounted' in prevPseudo ||
+            'group' in prevPseudo ||
+            'hasDynGroupChildren' in prevPseudo ||
+            'transition' in prevPseudo;
+        const nextPseudo = shouldReplacePseudo ? {} : prevPseudo;
+        let didChange = shouldReplacePseudo;
+        for (let i = 0; i < groupPseudoKeys.length; i++) {
+            const key = groupPseudoKeys[i];
+            const value = pseudo[key];
+            if (nextPseudo[key] !== value) {
+                nextPseudo[key] = value;
+                didChange = true;
+            }
+            else if (didChange) {
+                nextPseudo[key] = value;
+            }
+        }
+        if (!didChange) {
+            return;
+        }
+        groupContext.state.pseudo = nextPseudo;
+        groupEmitter.emit(groupContext.state);
+    }
+    // let hasLogged = false
+    if (staticConfig.componentName) {
+        component.displayName = staticConfig.componentName;
+    }
+    let res = component;
+    // we now have avoid re-renders in many more cases so imo this is way more worth it
+    // Text/Button/string taking components
+    //  + react compiler can memoize children too
+    res = react_1.default.memo(res);
+    res.staticConfig = staticConfig;
+    function extendStyledConfig(extended) {
+        return {
+            ...staticConfig,
+            ...extended,
+            neverFlatten: true,
+            isHOC: true,
+            isStyledHOC: false,
+        };
+    }
+    function styleable(Component, options) {
+        const skipForwardRef = typeof Component === 'function' && Component.length === 1;
+        let out = skipForwardRef ? Component : react_1.default.forwardRef(Component);
+        const extendedConfig = extendStyledConfig(options?.staticConfig);
+        out = options?.disableTheme ? out : (0, themeable_tsx_1.themeable)(out, extendedConfig, true);
+        if (extendedConfig.memo || process.env.GUI_MEMOIZE_STYLEABLE) {
+            out = react_1.default.memo(out);
+        }
+        out.staticConfig = extendedConfig;
+        out.styleable = styleable;
+        return out;
+    }
+    res.styleable = styleable;
+    return res;
+}
+const fromPx = (val) => {
+    if (typeof val === 'number')
+        return val;
+    if (typeof val === 'string')
+        return +val.replace('px', '');
+    return 0;
+};
+// handles all render logic - returns a new component
+const getCustomRender = (renderProp, content, viewProps, state) => {
+    // Handle render prop variants: function, JSX element, or string
+    if (typeof renderProp === 'function') {
+        // Render function: full control with props and state
+        const out = renderProp(viewProps, state);
+        renderProp = getRenderElementForPlatform(out);
+    }
+    if (renderProp) {
+        if (typeof renderProp === 'object' && react_1.default.isValidElement(renderProp)) {
+            // JSX element: clone with merged props
+            const renderElement = getRenderElementForPlatform(renderProp);
+            if (renderElement) {
+                const elementProps = renderProp.props;
+                const mergedProps = elementProps
+                    ? (0, mergeRenderElementProps_ts_1.mergeRenderElementProps)(elementProps, viewProps, content)
+                    : viewProps;
+                return {
+                    elementType: renderProp.type,
+                    viewProps: mergedProps,
+                };
+            }
+        }
+    }
+};
+// avoid passing web-only elements to native
+function getRenderElementForPlatform(potential) {
+    if ("web" === 'native') {
+        if (isHTMLElement(potential)) {
+            return;
+        }
+    }
+    return potential;
+}
+function isHTMLElement(el) {
+    return typeof el['type'] === 'string' && el['type'][0] === el['type'][0].toLowerCase();
+}
+//# sourceMappingURL=createComponent.js.map