@hanzogui/web 7.3.2 → 8.0.0

package/package.json

@@ -1,11 +1,13 @@
 {
   "name": "@hanzogui/web",
-  "version": "7.3.2",
-  "license": "BSD-3-Clause",
-  "author": "Hanzo AI <dev@hanzo.ai>",
+  "version": "8.0.0",
+  "license": "MIT",
+  "author": {
+    "name": "Nate Wienert"
+  },
   "repository": {
     "type": "git",
-    "url": "https://github.com/hanzoai/gui.git",
+    "url": "git+https://github.com/hanzoai/gui.git",
     "directory": "packages/web"
   },
   "source": "src/index.ts",
@@ -41,21 +43,28 @@
   "publishConfig": {
     "access": "public"
   },
+  "scripts": {
+    "build": "hanzogui-build",
+    "watch": "hanzogui-build --watch",
+    "clean": "hanzogui-build clean",
+    "clean:build": "hanzogui-build clean:build",
+    "test:web": "vitest --typecheck --run"
+  },
   "dependencies": {
-    "@hanzogui/compose-refs": "7.3.1",
-    "@hanzogui/constants": "7.3.1",
-    "@hanzogui/helpers": "7.3.1",
-    "@hanzogui/is-equal-shallow": "7.3.1",
-    "@hanzogui/native": "7.3.1",
-    "@hanzogui/normalize-css-color": "7.3.1",
-    "@hanzogui/timer": "7.3.1",
-    "@hanzogui/types": "7.3.0",
-    "@hanzogui/use-did-finish-ssr": "7.3.1",
-    "@hanzogui/use-event": "7.3.1",
-    "@hanzogui/use-force-update": "7.3.1"
+    "@hanzogui/compose-refs": "8.0.0",
+    "@hanzogui/constants": "8.0.0",
+    "@hanzogui/helpers": "8.0.0",
+    "@hanzogui/is-equal-shallow": "8.0.0",
+    "@hanzogui/native": "8.0.0",
+    "@hanzogui/normalize-css-color": "8.0.0",
+    "@hanzogui/timer": "8.0.0",
+    "@hanzogui/types": "8.0.0",
+    "@hanzogui/use-did-finish-ssr": "8.0.0",
+    "@hanzogui/use-event": "8.0.0",
+    "@hanzogui/use-force-update": "8.0.0"
   },
   "devDependencies": {
-    "@hanzogui/build": "7.3.1",
+    "@hanzogui/build": "8.0.0",
     "@testing-library/react": "^16.1.0",
     "csstype": "^3.0.10",
     "react": ">=19",
@@ -66,28 +75,6 @@
   },
   "peerDependencies": {
     "react": ">=19",
-    "react-dom": "*",
-    "react-native": "*"
-  },
-  "files": [
-    "dist",
-    "src",
-    "types",
-    "*.cjs",
-    "*.mjs",
-    "*.css",
-    "README.md"
-  ],
-  "peerDependenciesMeta": {
-    "react-native": {
-      "optional": true
-    }
-  },
-  "scripts": {
-    "build": "gui-build",
-    "watch": "gui-build --watch",
-    "clean": "gui-build clean",
-    "clean:build": "gui-build clean:build",
-    "test:web": "vitest --typecheck --run"
+    "react-dom": "*"
   }
-}
+}

package/src/_withStableStyle.tsx

@@ -4,7 +4,7 @@ import { useMedia } from './hooks/useMedia'
 import { useTheme } from './hooks/useTheme'
 import { ThemeStateContext } from './hooks/useThemeState'
 
-/** internal: this is for gui babel plugin usage only */
+/** internal: this is for hanzogui babel plugin usage only */
 
 const EMPTY_EXPRESSIONS: any[] = []
 const EMPTY_THEME = {}
@@ -28,7 +28,13 @@ export const _withStableStyle = (
       const media = hasMediaKeys ? useMedia() : null
 
       const resolvedExpressions = media
-        ? _expressions.map((expr: any) => (typeof expr === 'string' ? media[expr] : expr))
+        ? _expressions.map((expr: any) =>
+            Array.isArray(expr)
+              ? !!(media[expr[0]] && expr[1])
+              : typeof expr === 'string'
+                ? media[expr]
+                : expr
+          )
         : _expressions
 
       let resolvedTheme: any = theme || EMPTY_THEME
@@ -45,7 +51,7 @@ export const _withStableStyle = (
         if (process.env.NODE_ENV === 'development') {
           console.warn(
             '[@hanzogui] _withStableStyle: no ThemeStateContext found. ' +
-              'This usually means duplicate gui instances in a monorepo. ' +
+              'This usually means duplicate hanzogui instances in a monorepo. ' +
               'Falling back to default theme from config.'
           )
         }

package/src/config.ts

@@ -10,6 +10,8 @@ import type {
   TokensMerged,
 } from './types'
 
+export type StyleCompat = 'legacy' | 'react-native' | 'web'
+
 let conf: GuiInternalConfig | null
 let setConfigCalledByThisInstance = false
 
@@ -21,40 +23,40 @@ Haven't called createGui yet. ${MISSING_THEME_MESSAGE}
     : `❌ Error 001`
 
 // helper to get config from module-scoped variable or globalthis fallback
-// this handles vite ssr bundling where multiple copies of gui may exist
+// this handles vite ssr bundling where multiple copies of hanzogui may exist
 const getConfigFromGlobalOrLocal = (): GuiInternalConfig | null => {
   if (conf) {
     return conf
   }
 
   // fall back to globalthis (for vite ssr bundling scenarios)
-  if (globalThis.__guiConfig) {
+  if (globalThis.__hanzoguiConfig) {
     // defer warning - if createGui runs in THIS instance, it's HMR (safe)
     // if it never runs, it's a true duplicate (warn)
     if (
       process.env.NODE_ENV === 'development' &&
-      !globalThis.__guiHasWarnedGlobalFallback &&
-      !globalThis.__guiPendingCheck
+      !globalThis.__hanzoguiHasWarnedGlobalFallback &&
+      !globalThis.__hanzoguiPendingCheck
     ) {
-      globalThis.__guiPendingCheck = true
+      globalThis.__hanzoguiPendingCheck = true
       setTimeout(() => {
         if (
           !setConfigCalledByThisInstance &&
-          !globalThis.__guiHasWarnedGlobalFallback
+          !globalThis.__hanzoguiHasWarnedGlobalFallback
         ) {
-          globalThis.__guiHasWarnedGlobalFallback = true
+          globalThis.__hanzoguiHasWarnedGlobalFallback = true
           console.warn(
             `⚠️⚠️⚠️⚠️⚠️
 
-Gui: Using global config fallback. This may indicate duplicate gui instances (e.g., from Vite SSR bundling). This is handled automatically, but likely causes issues!
+Gui: Using global config fallback. This may indicate duplicate hanzogui instances (e.g., from Vite SSR bundling). This is handled automatically, but likely causes issues!
 
 ⚠️⚠️⚠️⚠️⚠️`
           )
         }
-        globalThis.__guiPendingCheck = false
+        globalThis.__hanzoguiPendingCheck = false
       }, 500)
     }
-    return globalThis.__guiConfig
+    return globalThis.__hanzoguiConfig
   }
 
   return null
@@ -74,10 +76,15 @@ export const getSetting = <Key extends keyof GenericGuiSettings>(
   )
 }
 
+export function getStyleCompat(): StyleCompat {
+  const config = getConfigFromGlobalOrLocal()
+  return (config?.settings.styleCompat ?? (config as any)?.styleCompat) || 'web'
+}
+
 export const setConfig = (next: GuiInternalConfig) => {
   setConfigCalledByThisInstance = true
   conf = next
-  globalThis.__guiConfig = next
+  globalThis.__hanzoguiConfig = next
 }
 
 export const setConfigFont = (name: string, font: any, fontParsed: any) => {
@@ -94,7 +101,7 @@ export const getConfig = () => {
   if (!config) {
     throw new Error(
       process.env.NODE_ENV !== 'production'
-        ? `Missing gui config, you either have a duplicate config, or haven't set it up. Be sure createGui is called before rendering. Also, make sure all of your gui dependencies are on the same version (\`gui\`, \`@hanzogui/package-name\`, etc.) not just in your package.json, but in your lockfile.`
+        ? `Missing hanzogui config, you either have a duplicate config, or haven't set it up. Be sure createGui is called before rendering. Also, make sure all of your hanzogui dependencies are on the same version (\`hanzogui\`, \`@hanzogui/package-name\`, etc.) not just in your package.json, but in your lockfile.`
         : 'Err0'
     )
   }
@@ -160,7 +167,10 @@ export const getThemes = () => getConfigFromGlobalOrLocal()!.themes
 export const updateConfig = (key: string, value: any) => {
   // for usage internally only
   const config = getConfigFromGlobalOrLocal()
-  Object.assign(config![key], value)
+  if (!config || !Object.prototype.hasOwnProperty.call(config, key)) {
+    return
+  }
+  Object.assign(config[key], value)
 }
 
 // searches by value name or token name
@@ -197,7 +207,7 @@ export function setupDev(conf: DevConfig) {
  *
  * @example
  * ```tsx
- * // import loadAnimationDriver from gui
+ * // import loadAnimationDriver from hanzogui
  * // import createAnimations from your preferred driver (e.g. animations-reanimated)
  *
  * const driver = createAnimations({ bouncy: { type: 'spring', damping: 10 } })

package/src/constants/accessibilityDirectMap.tsx

@@ -1,6 +1,6 @@
 // v2: RN accessibility props are no longer converted
 // Users should use web-standard aria-* props directly (aria-label, role, etc.)
-// See https://gui.dev/docs/intro/version-two for migration guide
+// See https://hanzogui.dev/docs/intro/version-two for migration guide
 
 export const accessibilityDirectMap: Record<string, string> = {}
 

package/src/constants/constants.ts

@@ -2,7 +2,7 @@ import type { StackStyle } from '../types'
 
 export const THEME_NAME_SEPARATOR = '_'
 export const THEME_CLASSNAME_PREFIX = 't_'
-export const FONT_DATA_ATTRIBUTE_NAME = 'data-gui-font'
+export const FONT_DATA_ATTRIBUTE_NAME = 'data-hanzogui-font'
 
 export const MISSING_THEME_MESSAGE =
   process.env.NODE_ENV === 'development'

package/src/createComponent.tsx

@@ -1,5 +1,13 @@
 import { composeRefs } from '@hanzogui/compose-refs'
-import { isClient, isServer, isWeb, useIsomorphicLayoutEffect } from '@hanzogui/constants'
+import {
+  getPlatformDriver,
+  isAndroid,
+  isClient,
+  isNativeDesktop,
+  isServer,
+  isWeb,
+  useIsomorphicLayoutEffect,
+} from '@hanzogui/constants'
 import { NativeMenuContext } from '@hanzogui/native'
 import { composeEventHandlers } from '@hanzogui/helpers'
 import { isEqualShallow } from '@hanzogui/is-equal-shallow'
@@ -63,6 +71,7 @@ import type { ViewProps } from './views/View'
 // 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<string, string>()
 const dataSlotFor = (name: string): string => {
   let slot = dataSlotCache.get(name)
@@ -98,6 +107,16 @@ const avoidReRenderKeys = new Set([
   'group',
 ])
 
+const groupPseudoKeys = [
+  'disabled',
+  'hover',
+  'press',
+  'pressIn',
+  'focus',
+  'focusVisible',
+  'focusWithin',
+] as const satisfies readonly (keyof PseudoGroupState)[]
+
 if (process.env.GUI_TARGET !== 'native' && typeof window !== 'undefined') {
   const cancelPresses = () => {
     // clear all press downs
@@ -142,8 +161,8 @@ if (process.env.GUI_TARGET !== 'native' && typeof window !== 'undefined') {
     startVisualizer = () => {
       const devVisualizerConfig = devConfig?.visualizer
 
-      if (devVisualizerConfig && !globalThis.__guiDevVisualizer) {
-        globalThis.__guiDevVisualizer = true
+      if (devVisualizerConfig && !globalThis.__hanzoguiDevVisualizer) {
+        globalThis.__hanzoguiDevVisualizer = true
 
         debugKeyListeners = new Set()
         let tm
@@ -282,10 +301,14 @@ export function createComponent<
 
     // test only
     if (process.env.NODE_ENV === 'test') {
-      if (propsIn['data-test-renders']) {
-        propsIn['data-test-renders']['current'] =
-          propsIn['data-test-renders']['current'] ?? 0
-        propsIn['data-test-renders']['current'] += 1
+      const testRenderCount = propsIn['data-test-renders']
+      if (
+        testRenderCount &&
+        typeof testRenderCount === 'object' &&
+        !Object.isFrozen(testRenderCount)
+      ) {
+        testRenderCount.current = testRenderCount.current ?? 0
+        testRenderCount.current += 1
       }
     }
 
@@ -305,9 +328,14 @@ export function createComponent<
     // 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 =
-      process.env.GUI_TARGET === 'native'
-        ? React.useContext(NativeMenuContext)
+      process.env.GUI_TARGET === 'native' && isAndroid
+        ? // eslint-disable-next-line react-hooks/rules-of-hooks
+          React.useContext(NativeMenuContext)
         : false
 
     if (
@@ -324,7 +352,7 @@ export function createComponent<
     if (process.env.NODE_ENV === 'development' && !time && (globalThis as any).time) {
       time = (globalThis as any).time
     }
-    if (process.env.NODE_ENV === 'development' && time) time`non-gui time (ignore)`
+    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
@@ -459,19 +487,65 @@ export function createComponent<
       outputStyle,
       willBeAnimated,
       willBeAnimatedClient,
+      platformPseudo,
       startedUnhydrated,
     } = componentState
 
-    if (hasAnimationProp && animationDriver?.avoidReRenders) {
+    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.
       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) {
-          stateRef.current.nextState = undefined
+        if (!pendingState) return
+        stateRef.current.nextState = undefined
+        if (!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.
+    useIsomorphicLayoutEffect(() => {
+      if (!platformPseudo || props.disabled) return
+      const pseudoDriver = 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 = useMemo((): AllGroupContexts | null => {
       if (!groupName || props.passThrough) {
@@ -748,7 +822,7 @@ export function createComponent<
 
     if (
       !isPassthrough &&
-      (hasAnimationProp || groupName) &&
+      (hasAnimationProp || groupName || platformPseudo) &&
       animationDriver?.avoidReRenders &&
       !hasEnterExitTransition
     ) {
@@ -758,11 +832,15 @@ export function createComponent<
         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
+        // 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) {
-            stateRef.current.nextState = undefined
             ogSetStateShallow(pendingState)
           }
           return
@@ -792,13 +870,30 @@ export function createComponent<
           stateRef.current.prevPseudoState,
           updatedState,
           nextStyles?.pseudoTransitions,
-          props.transition
+          // 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 = extractPseudoState(updatedState)
 
-        useStyleListener((nextStyles?.style || {}) as any, effectiveTransition)
+        // 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 || {}) as any,
+          effectiveTransition,
+          hasActivePseudo
+        )
       }
 
       function updateGroupListeners() {
@@ -962,6 +1057,7 @@ export function createComponent<
       onMouseLeave,
       onFocus,
       onBlur,
+      onDidAnimate,
       separator,
       // ignore from here on out
       passThrough,
@@ -1013,7 +1109,8 @@ export function createComponent<
         stateRef.current.prevPseudoState,
         state,
         splitStyles?.pseudoTransitions,
-        props.transition
+        // platform-pseudo with no declared transition = instant (CSS :hover semantics)
+        props.transition ?? (platformPseudo ? '0ms' : undefined)
       )
 
       // add effectiveTransition to splitStyles for drivers to consume
@@ -1041,6 +1138,7 @@ export function createComponent<
         pseudos: pseudos || null,
         staticConfig,
         stateRef,
+        onDidAnimate,
       })
 
       if (animations) {
@@ -1256,9 +1354,14 @@ export function createComponent<
     )
 
     const runtimeHoverStyle = !disabled && noClass && pseudos?.hoverStyle
-    const needsHoverState = Boolean(hasDynamicGroupChildren || runtimeHoverStyle)
+    // 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 =
-      isWeb &&
+      (isWeb || isNativeDesktop) &&
       !!(hasDynamicGroupChildren || needsHoverState || onMouseEnter || onMouseLeave)
 
     // check presence rather than value to prevent reparenting bugs
@@ -1450,6 +1553,9 @@ export function createComponent<
 
     // EVENTS native - handles focus/blur, input special cases, and RNGH press handling
     // Skip gesture setup for HOC components - they may return null which crashes GestureDetector
+    // hasRealPressEvents distinguishes user-provided handlers from events.onPress
+    // synthesized for pressStyle alone — only the former should claim the responder.
+    const hasRealPressEvents = !!(onPress || onPressIn || onPressOut || onLongPress)
     const pressGesture =
       process.env.GUI_TARGET === 'native'
         ? useEvents(
@@ -1459,7 +1565,8 @@ export function createComponent<
             staticConfig,
             isHOC,
             isInsideNativeMenu,
-            pressDebugName
+            pressDebugName,
+            hasRealPressEvents
           )
         : null
 
@@ -1558,7 +1665,8 @@ export function createComponent<
         pressGesture,
         stateRef,
         isHOC,
-        isCompositeComponent
+        isCompositeComponent,
+        hasRealPressEvents
       )
     }
 
@@ -1753,9 +1861,36 @@ export function createComponent<
     if (!groupContext || !groupEmitter) {
       return
     }
-    const nextState = { ...groupContext.state, pseudo }
-    groupEmitter.emit(nextState)
-    groupContext.state = nextState
+
+    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

package/src/createGui.ts

@@ -56,7 +56,7 @@ function initializeGuiConfig(config: GuiInternalConfig) {
 export function createGui<Conf extends CreateGuiProps>(
   configIn: Conf
 ): InferGuiConfig<Conf> {
-  // if config already exists (e.g., from another copy of gui in vite ssr), reuse it
+  // if config already exists (e.g., from another copy of hanzogui in vite ssr), reuse it
   const existingConfig = getConfigMaybe()
 
   if (existingConfig) {
@@ -257,7 +257,7 @@ export function createGui<Conf extends CreateGuiProps>(
     return config as any
   }
 
-  if (process.env.DEBUG?.startsWith('gui')) {
+  if (process.env.DEBUG?.startsWith('hanzogui')) {
     console.info('Gui config:', config)
   }
   if (!globalThis['Gui']) {