@hanzogui/web 3.0.6 → 4.3.1

package/src/helpers/getSplitStyles.tsx

@@ -23,6 +23,7 @@ import { isDevTools } from '../constants/isDevTools'
 import {
   getMediaImportanceIfMoreImportant,
   getMediaKey,
+  getMediaKeyImportance,
   mediaKeyMatch,
 } from '../hooks/useMedia'
 import { mediaState as globalMediaState, mediaQueryConfig } from './mediaState'
@@ -58,7 +59,7 @@ import {
 } from './getDynamicVal'
 import { getGroupPropParts } from './getGroupPropParts'
 import { insertStyleRules, shouldInsertStyleRules, updateRules } from './insertStyleRule'
-import { isActivePlatform } from './isActivePlatform'
+import { isActivePlatform, getPlatformSpecificityBump } from './isActivePlatform'
 import { isActiveTheme } from './isActiveTheme'
 import { log } from './log'
 import { normalizeValueWithProperty } from './normalizeValueWithProperty'
@@ -67,6 +68,7 @@ import {
   type PseudoDescriptorKey,
   pseudoDescriptors,
   pseudoPriorities,
+  defaultMediaImportance,
 } from './pseudoDescriptors'
 import { skipProps } from './skipProps'
 import { sortString } from './sortString'
@@ -208,7 +210,7 @@ export const getSplitStyles: StyleSplitter = (
   const shouldDoClasses = acceptsClassName && isWeb && !styleProps.noClass
 
   const rulesToInsert: RulesToInsert =
-    process.env.HANZO_GUI_TARGET === 'native' ? (undefined as any) : {}
+    process.env.GUI_TARGET === 'native' ? (undefined as any) : {}
   const classNames: ClassNamesObject = {}
 
   let space: SpaceTokens | null = props.space
@@ -354,12 +356,12 @@ export const getSplitStyles: StyleSplitter = (
     // keyInit === 'style' is handled in skipProps
     if (keyInit in skipProps && !noSkip && !isHOC) {
       if (keyInit === 'group') {
-        if (process.env.HANZO_GUI_TARGET === 'web') {
+        if (process.env.GUI_TARGET === 'web') {
           // add container style
           const identifier = `t_group_${valInit}`
           const containerType = webContainerType || 'inline-size'
           const containerCSS = [
-            'continer',
+            'container',
             undefined,
             identifier,
             undefined,
@@ -370,13 +372,23 @@ export const getSplitStyles: StyleSplitter = (
           addStyleToInsertRules(rulesToInsert, containerCSS)
         }
       }
-      continue
+      // transition prop is skipped when it's a named animation (e.g. 'quick')
+      // but raw CSS values (from $platform-web) should pass through as style
+      if (
+        keyInit === 'transition' &&
+        typeof valInit === 'string' &&
+        !driver?.animations?.[valInit]
+      ) {
+        // not a known animation name, treat as raw CSS
+      } else {
+        continue
+      }
     }
 
     let isValidStyleKeyInit = isValidStyleKey(keyInit, validStyles, accept)
 
     // this is all for partially optimized (not flattened)... maybe worth removing?
-    if (process.env.HANZO_GUI_TARGET === 'web') {
+    if (process.env.GUI_TARGET === 'web') {
       // react-native-web ignores data-* attributes, fixes passing them to animated views
       if (staticConfig.isReactNative && keyInit.startsWith('data-')) {
         keyInit = keyInit.replace('data-', '')
@@ -386,7 +398,7 @@ export const getSplitStyles: StyleSplitter = (
       }
     }
 
-    if (process.env.HANZO_GUI_TARGET === 'native') {
+    if (process.env.GUI_TARGET === 'native') {
       if (!isValidStyleKeyInit) {
         if (!isAndroid) {
           // only works in android
@@ -403,7 +415,7 @@ export const getSplitStyles: StyleSplitter = (
       }
     }
 
-    if (process.env.HANZO_GUI_TARGET === 'web') {
+    if (process.env.GUI_TARGET === 'web') {
       if (!noExpand) {
         /**
          * Copying in the accessibility/prop handling from react-native-web here
@@ -543,7 +555,14 @@ export const getSplitStyles: StyleSplitter = (
 
     // after shouldPassThrough
     if (!noSkip) {
-      if (keyInit in skipProps) {
+      if (
+        keyInit in skipProps &&
+        !(
+          keyInit === 'transition' &&
+          typeof valInit === 'string' &&
+          !driver?.animations?.[valInit]
+        )
+      ) {
         if (process.env.NODE_ENV === 'development' && debug === 'verbose') {
           console.groupEnd()
         }
@@ -580,7 +599,7 @@ export const getSplitStyles: StyleSplitter = (
 
       if (val == null) return
 
-      if (process.env.HANZO_GUI_TARGET === 'native') {
+      if (process.env.GUI_TARGET === 'native') {
         if (key === 'pointerEvents') {
           viewProps[key] = val
           return
@@ -589,7 +608,7 @@ export const getSplitStyles: StyleSplitter = (
 
       if (
         (!isHOC && isValidStyleKey(key, validStyles, accept)) ||
-        (process.env.HANZO_GUI_TARGET === 'native' && isAndroid && key === 'elevation')
+        (process.env.GUI_TARGET === 'native' && isAndroid && key === 'elevation')
       ) {
         mergeStyle(styleState, key, val, 1, false, originalVal)
         return
@@ -855,7 +874,7 @@ export const getSplitStyles: StyleSplitter = (
 
           if (isThemeMedia) {
             if (
-              process.env.HANZO_GUI_TARGET === 'native' &&
+              process.env.GUI_TARGET === 'native' &&
               isIos &&
               getSetting('fastSchemeChange')
             ) {
@@ -999,6 +1018,12 @@ export const getSplitStyles: StyleSplitter = (
               }
               importanceBump = priority
             }
+          } else if (isPlatformMedia) {
+            // Platform styles use specificity-based importance bumps so that more
+            // specific platform selectors reliably win over broader ones regardless
+            // of prop declaration order (e.g. $platform-tv always overrides
+            // $platform-native for the same property, even if tv is listed first).
+            importanceBump = getPlatformSpecificityBump(mediaKeyShort)
           }
 
           const mediaOriginalValues = styleOriginalValues.get(mediaStyle)
@@ -1012,6 +1037,14 @@ export const getSplitStyles: StyleSplitter = (
           }
 
           function mergeMediaStyle(key: string, val: any, originalVal?: any) {
+            // on native, non-style keys from media queries (like numberOfLines)
+            // need to go to viewProps, not style
+            if (process.env.TAMAGUI_TARGET === 'native') {
+              if (!isValidStyleKey(key, validStyles, accept)) {
+                viewProps[key] = val
+                return
+              }
+            }
             styleState.style ||= {}
             const didMerge = mergeMediaByImportance(
               styleState,
@@ -1033,17 +1066,64 @@ export const getSplitStyles: StyleSplitter = (
               continue
             }
             if (subKey[0] === '$') {
-              if (!isActivePlatform(subKey)) continue
-              if (!isActiveTheme(subKey, themeName)) continue
-              const subOriginalValues = styleOriginalValues.get(
-                mediaStyle[subKey] as object
-              )
-              for (const subSubKey in mediaStyle[subKey]) {
-                mergeMediaStyle(
-                  subSubKey,
-                  mediaStyle[subKey][subSubKey],
+              const subMediaType = getMediaKey(subKey)
+              if (subMediaType === 'platform') {
+                if (!isActivePlatform(subKey)) continue
+              } else if (subMediaType === 'theme') {
+                if (!isActiveTheme(subKey, themeName)) continue
+              } else if (subMediaType === true) {
+                // regular media query nested inside platform/theme/media
+                const subKeyShort = subKey.slice(1)
+                if (!mediaState[subKeyShort]) continue
+              }
+
+              const nestedVal = mediaStyle[subKey] as Record<string, any>
+              const subOriginalValues = styleOriginalValues.get(nestedVal)
+
+              // Nested styles are more specific than their outer context because
+              // they require both conditions to be true. Calculate an importance
+              // that is the sum of both the outer and inner importances so that:
+              //   1) nested always beats non-nested
+              //   2) $xs={{ $platform-android: ... }} and
+              //      $platform-android={{ $xs: ... }} produce identical importance
+              //      (last-declared wins for the same property)
+              const isSizeMediaKey = !!mediaState[mediaKeyShort]
+              const outerBase = isSizeMediaKey
+                ? getMediaKeyImportance(mediaKeyShort)
+                : defaultMediaImportance
+
+              let innerBase: number
+              if (subMediaType === 'platform') {
+                innerBase =
+                  defaultMediaImportance + getPlatformSpecificityBump(subKey.slice(1))
+              } else if (subMediaType === true) {
+                innerBase = getMediaKeyImportance(subKey.slice(1))
+              } else {
+                innerBase = defaultMediaImportance
+              }
+
+              const nestedImportance = outerBase + importanceBump + innerBase + 1
+
+              for (const subSubKey in nestedVal) {
+                // expand shorthands — getSubStyle doesn't expand keys
+                // inside nested $ objects (they pass through propMapper as-is)
+                const expandedKey = shorthands[subSubKey] || subSubKey
+                const { usedKeys } = styleState
+                if (usedKeys[expandedKey] && usedKeys[expandedKey] > nestedImportance) {
+                  continue
+                }
+                styleState.style ||= {}
+                mergeStyle(
+                  styleState,
+                  expandedKey,
+                  nestedVal[subSubKey],
+                  nestedImportance,
+                  false,
                   subOriginalValues?.[subSubKey]
                 )
+                if (expandedKey === 'fontFamily') {
+                  styleState.fontFamily = nestedVal[subSubKey] as string
+                }
               }
             } else {
               mergeMediaStyle(subKey, mediaStyle[subKey], mediaOriginalValues?.[subKey])
@@ -1120,7 +1200,7 @@ export const getSplitStyles: StyleSplitter = (
 
     // add in defaults if not set:
     if (parentSplitStyles) {
-      if (process.env.HANZO_GUI_TARGET === 'web') {
+      if (process.env.GUI_TARGET === 'web') {
         if (shouldDoClasses) {
           for (const key in parentSplitStyles.classNames) {
             const val = parentSplitStyles.classNames[key]
@@ -1141,7 +1221,7 @@ export const getSplitStyles: StyleSplitter = (
   }
 
   // Button for example uses disableClassName: true but renders to a 'button' element, so needs this
-  if (process.env.HANZO_GUI_TARGET === 'web') {
+  if (process.env.GUI_TARGET === 'web') {
     const shouldStringifyTransforms =
       !styleProps.noNormalize &&
       !staticConfig.isReactNative &&
@@ -1153,7 +1233,7 @@ export const getSplitStyles: StyleSplitter = (
     }
   }
 
-  if (process.env.HANZO_GUI_TARGET === 'web') {
+  if (process.env.GUI_TARGET === 'web') {
     if (!styleProps.noMergeStyle && styleState.style && shouldDoClasses) {
       let retainedStyles: ViewStyleWithPseudos | undefined
       let shouldRetain = false
@@ -1265,7 +1345,7 @@ export const getSplitStyles: StyleSplitter = (
   }
 
   // native: swap out the right family based on weight/style
-  if (process.env.HANZO_GUI_TARGET === 'native') {
+  if (process.env.GUI_TARGET === 'native') {
     // set accessible when tabIndex is 0 (issue #3350)
     if (viewProps.tabIndex === 0) {
       viewProps.accessible ??= true
@@ -1321,7 +1401,7 @@ export const getSplitStyles: StyleSplitter = (
     if (!asChildExceptStyleLike) {
       const style = styleState.style
 
-      if (process.env.HANZO_GUI_TARGET === 'web') {
+      if (process.env.GUI_TARGET === 'web') {
         // merge className and style back into viewProps:
         // only emit font class if fontFamily was explicitly in props (not from defaults)
         let fontFamily = isText || isInput ? styleState.fontFamily : null
@@ -1514,6 +1594,14 @@ export const getSubStyle = (
           styleOut['transition'] = `all ${animationConfig}${important}`
         }
       }
+      // not a known animation name, pass through as raw CSS
+      if (
+        !styleOut['transition'] &&
+        typeof val === 'string' &&
+        !driver?.animations?.[val]
+      ) {
+        styleOut['transition'] = val
+      }
       continue
     }
 
@@ -1610,7 +1698,7 @@ export const useSplitStyles: StyleSplitter = (a, b, c, d, e, f, g, h, i, j, k, l
 
   const res = getSplitStyles(a, b, c, d, e, f, g, h, i, j, k, l, m)
 
-  if (process.env.HANZO_GUI_TARGET !== 'native') {
+  if (process.env.GUI_TARGET !== 'native') {
     useInsertEffectCompat(() => {
       if (res) {
         insertStyleRules(res.rulesToInsert)
@@ -1622,7 +1710,7 @@ export const useSplitStyles: StyleSplitter = (a, b, c, d, e, f, g, h, i, j, k, l
 }
 
 function addStyleToInsertRules(rulesToInsert: RulesToInsert, styleObject: StyleObject) {
-  if (process.env.HANZO_GUI_TARGET === 'web') {
+  if (process.env.GUI_TARGET === 'web') {
     const identifier = styleObject[StyleObjectIdentifier]
     if (shouldInsertStyleRules(identifier)) {
       updateRules(identifier, styleObject[StyleObjectRules])
@@ -1631,7 +1719,7 @@ function addStyleToInsertRules(rulesToInsert: RulesToInsert, styleObject: StyleO
   }
 }
 
-const defaultColor = process.env.HANZO_GUI_DEFAULT_COLOR || 'rgba(0,0,0,0)'
+const defaultColor = process.env.GUI_DEFAULT_COLOR || 'rgba(0,0,0,0)'
 const animatableDefaults = {
   ...Object.fromEntries(
     Object.entries(tokenCategories.color).map(([k, v]) => [k, defaultColor])
@@ -1703,7 +1791,20 @@ function mergeMediaByImportance(
     isSizeMedia
   )
   if (importanceBump) {
-    importance = (importance || 0) + importanceBump
+    // With a specificity bump, the effective importance is always
+    // defaultMediaImportance + bump. This lets higher-specificity styles
+    // (e.g. $platform-tv > $platform-native) override lower-specificity ones
+    // regardless of prop declaration order, even when getMediaImportanceIfMoreImportant
+    // returns null (meaning the same base importance was already applied).
+    //
+    // We must re-check `usedKeys[key]` here (rather than relying on the null
+    // returned by getMediaImportanceIfMoreImportant) because that function only
+    // compares against `defaultMediaImportance`, which equals our base before
+    // the bump. We need to compare against the *bumped* value to correctly
+    // allow a more-specific style to win.
+    const bumpedImportance = defaultMediaImportance + importanceBump
+    importance =
+      !usedKeys[key] || bumpedImportance > usedKeys[key] ? bumpedImportance : null
   }
   if (process.env.NODE_ENV === 'development' && debugProp === 'verbose') {
     log(

package/src/helpers/getThemeCSSRules.ts

@@ -18,14 +18,14 @@ export function getThemeCSSRules(props: {
   // Use mutated variable prefix (mt) instead of regular (t) - for dynamic theme mutation
   useMutatedVariables?: boolean
 }): string[] {
-  if (process.env.HANZO_GUI_DID_OUTPUT_CSS) {
+  if (process.env.GUI_DID_OUTPUT_CSS) {
     // empty - CSS already extracted at build time
-  } else if (process.env.HANZO_GUI_TARGET === 'native') {
+  } else if (process.env.GUI_TARGET === 'native') {
     // no CSS on native
   } else if (
-    !process.env.HANZO_GUI_DOES_SSR_CSS ||
-    process.env.HANZO_GUI_DOES_SSR_CSS === 'mutates-themes' ||
-    process.env.HANZO_GUI_DOES_SSR_CSS === 'false'
+    !process.env.GUI_DOES_SSR_CSS ||
+    process.env.GUI_DOES_SSR_CSS === 'mutates-themes' ||
+    process.env.GUI_DOES_SSR_CSS === 'false'
   ) {
     const cssRuleSets: string[] = []
     const { config, themeName, theme, names } = props
@@ -46,7 +46,7 @@ export function getThemeCSSRules(props: {
       const variable = theme[themeKey] as Variable
       const value = variableCreator(variable.val).variable
       // Hash themeKey in case it has invalid chars too
-      vars += `--${process.env.HANZO_GUI_CSS_VARIABLE_PREFIX || ''}${simpleHash(
+      vars += `--${process.env.GUI_CSS_VARIABLE_PREFIX || ''}${simpleHash(
         themeKey,
         40
       )}:${value};`

package/src/helpers/getTokenForKey.ts

@@ -132,15 +132,15 @@ export const getTokenForKey = (
             hasSet = true
           } else {
             if (process.env.NODE_ENV === 'development') {
-              if (process.env.HANZO_GUI_DISABLE_MISSING_TOKEN_LOG !== '1') {
+              if (process.env.GUI_DISABLE_MISSING_TOKEN_LOG !== '1') {
                 if (!didLogMissingToken) {
                   didLogMissingToken = true
                   console.groupCollapsed(
                     `[hanzo-gui] Warning: missing token ${key} in category ${cat} - ${value} (open for details)`
                   )
                   console.info(
-                    `Note: this could just be due to you not setting all the theme tokens Hanzo GUI expects, which is harmless, but
-                    it also often can be because you have a duplicated Hanzo GUI in your bundle, which can cause tricky bugs.`
+                    `Note: this could just be due to you not setting all the theme tokens GUI expects, which is harmless, but
+                    it also often can be because you have a duplicated GUI in your bundle, which can cause tricky bugs.`
                   )
                   console.info(
                     `To see if you have duplicated dependencies, in Chrome DevTools hit CMD+P and type GuiProvider.
@@ -150,7 +150,7 @@ export const getTokenForKey = (
                     `You can debug that issue by opening the .mjs and .cjs files and setting a breakpoint at the top of each.`
                   )
                   console.info(
-                    `We only log this warning one time as it's sometimes harmless, to disable this log entirely set process.env.HANZO_GUI_DISABLE_MISSING_TOKEN_LOG=1.`
+                    `We only log this warning one time as it's sometimes harmless, to disable this log entirely set process.env.GUI_DISABLE_MISSING_TOKEN_LOG=1.`
                   )
                   console.groupEnd()
                 }
@@ -210,14 +210,14 @@ export function resolveVariableValue(
     const get = valOrVar?.get
 
     // shadowColor doesn't support dynamic style
-    if (process.env.HANZO_GUI_TARGET !== 'native' || key !== 'shadowColor') {
+    if (process.env.GUI_TARGET !== 'native' || key !== 'shadowColor') {
       if (typeof get === 'function') {
         const resolveDynamicFor = resolveValues === 'web' ? 'web' : undefined
         return get(resolveDynamicFor)
       }
     }
 
-    return process.env.HANZO_GUI_TARGET === 'native' ? valOrVar.val : valOrVar.variable
+    return process.env.GUI_TARGET === 'native' ? valOrVar.val : valOrVar.variable
   }
   return valOrVar
 }

package/src/helpers/insertStyleRule.tsx

@@ -17,7 +17,7 @@ const allRules: Record<string, string> = {}
 
 export const getAllSelectors = () => allSelectors
 export const getAllRules = () => {
-  if (!process.env.HANZO_GUI_DID_OUTPUT_CSS) {
+  if (!process.env.GUI_DID_OUTPUT_CSS) {
     // Sort by identifier to ensure deterministic CSS output order
     const sortedKeys = Object.keys(allRules).sort()
     return sortedKeys.map((key) => allRules[key])
@@ -41,9 +41,9 @@ export function scanAllSheets(
   collectThemes = false,
   tokens?: TokensParsed
 ): DedupedThemes | undefined {
-  if (!process.env.HANZO_GUI_DID_OUTPUT_CSS) {
+  if (!process.env.GUI_DID_OUTPUT_CSS) {
     if (process.env.NODE_ENV === 'test') return
-    if (process.env.HANZO_GUI_TARGET !== 'web') return
+    if (process.env.GUI_TARGET !== 'web') return
 
     let themes: DedupedThemes | undefined
 
@@ -80,7 +80,7 @@ function trackInsertedStyle(id: string) {
   return next
 }
 
-const bailAfterEnv = process.env.HANZO_GUI_BAIL_AFTER_SCANNING_X_CSS_RULES
+const bailAfterEnv = process.env.GUI_BAIL_AFTER_SCANNING_X_CSS_RULES
 const bailAfter = bailAfterEnv ? +bailAfterEnv : 8000
 
 function updateSheetStyles(
@@ -198,8 +198,8 @@ function addThemesFromCSS(cssStyleRule: CSSStyleRule, tokens?: TokensParsed) {
     if (sepI === -1) continue
     const varIndex = rule.indexOf('--')
     let key = rule.slice(varIndex === -1 ? 0 : varIndex + 2, sepI)
-    if (process.env.HANZO_GUI_CSS_VARIABLE_PREFIX) {
-      key = key.replace(process.env.HANZO_GUI_CSS_VARIABLE_PREFIX, '')
+    if (process.env.GUI_CSS_VARIABLE_PREFIX) {
+      key = key.replace(process.env.GUI_CSS_VARIABLE_PREFIX, '')
     }
     const val = rule.slice(sepI + 2)
     let value: string
@@ -301,7 +301,7 @@ export function setNonce(_: string) {
 }
 
 export function insertStyleRules(rulesToInsert: RulesToInsert) {
-  if (process.env.HANZO_GUI_TARGET !== 'web') return
+  if (process.env.GUI_TARGET !== 'web') return
 
   if (!sheet && document.head) {
     const styleTag = document.createElement('style')
@@ -342,10 +342,10 @@ export function insertStyleRules(rulesToInsert: RulesToInsert) {
 
 // The way browser or next.js work you end up with CSS being removed *after* the new CSS loads for the upcoming page
 // this causes many bugs. We defaulted to "2" here for safety, meaning we sacrificed some performance
-// setting HANZO_GUI_INSERT_SELECTOR_TRIES=1 will be faster so long as you are concatting your CSS together
+// setting GUI_INSERT_SELECTOR_TRIES=1 will be faster so long as you are concatting your CSS together
 
-const maxToInsert = process.env.HANZO_GUI_INSERT_SELECTOR_TRIES
-  ? +process.env.HANZO_GUI_INSERT_SELECTOR_TRIES
+const maxToInsert = process.env.GUI_INSERT_SELECTOR_TRIES
+  ? +process.env.GUI_INSERT_SELECTOR_TRIES
   : 1
 
 export function shouldInsertStyleRules(identifier: string) {
@@ -354,9 +354,9 @@ export function shouldInsertStyleRules(identifier: string) {
   }
   const total = totalSelectorsInserted.get(identifier) || 0
   if (process.env.NODE_ENV === 'development') {
-    if (total > +(process.env.HANZO_GUI_STYLE_INSERTION_WARNING_LIMIT || 10)) {
+    if (total > +(process.env.GUI_STYLE_INSERTION_WARNING_LIMIT || 10)) {
       console.warn(
-        `Warning: inserting many CSS rules, you may be animating something and generating many CSS insertions, which can degrade performance. Instead, try using the "disableClassName" property on elements that change styles often. To disable this warning set HANZO_GUI_STYLE_INSERTION_WARNING_LIMIT from 50000 to something higher`
+        `Warning: inserting many CSS rules, you may be animating something and generating many CSS insertions, which can degrade performance. Instead, try using the "disableClassName" property on elements that change styles often. To disable this warning set GUI_STYLE_INSERTION_WARNING_LIMIT from 50000 to something higher`
       )
     }
   }

package/src/helpers/isActivePlatform.ts

@@ -1,4 +1,25 @@
-import { currentPlatform } from '@hanzogui/constants'
+import { currentPlatform, isAndroid, isIos, isTV } from '@hanzogui/constants'
+
+/**
+ * Returns the specificity bump for a platform media key so that more specific
+ * platform selectors reliably override more general ones regardless of the order
+ * props are declared.
+ *
+ * Cascade (low -> high importance):
+ *   $platform-native / $platform-web         -> bump 0  (widest)
+ *   $platform-android / $platform-ios        -> bump 1  (OS-specific)
+ *   $platform-tv                             -> bump 2  (TV subset of Android/iOS)
+ *   $platform-androidtv / $platform-tvos     -> bump 3  (most specific)
+ *
+ * @param mediaKeyShort - Platform media key without the leading '$' (e.g. 'platform-tv', 'platform-androidtv')
+ */
+export function getPlatformSpecificityBump(mediaKeyShort: string): number {
+  if (mediaKeyShort === 'platform-androidtv' || mediaKeyShort === 'platform-tvos')
+    return 3
+  if (mediaKeyShort === 'platform-tv') return 2
+  if (mediaKeyShort === 'platform-android' || mediaKeyShort === 'platform-ios') return 1
+  return 0
+}
 
 export function isActivePlatform(key: string) {
   if (!key.startsWith('$platform')) {
@@ -6,9 +27,17 @@ export function isActivePlatform(key: string) {
   }
   const platform = key.slice(10)
   return (
-    // web, ios, android
+    // exact platform match (web, ios, android)
     platform === currentPlatform ||
-    // web, native
-    platform === process.env.HANZO_GUI_TARGET
+    // native matches all non-web platforms (iOS, Android, tvOS, Android TV)
+    (platform === 'native' && currentPlatform !== 'web') ||
+    // GUI_TARGET fallback (web or native build target)
+    platform === process.env.GUI_TARGET ||
+    // tv matches both Android TV and tvOS
+    (platform === 'tv' && isTV) ||
+    // androidtv matches Android TV specifically
+    (platform === 'androidtv' && isAndroid && isTV) ||
+    // tvos matches tvOS specifically
+    (platform === 'tvos' && isIos && isTV)
   )
 }

package/src/helpers/log.ts

@@ -4,7 +4,7 @@ export function log(...args: any[]) {
   if (process.env.NODE_ENV === 'production') return
   _disableMediaTouch(true)
   try {
-    if (process.env.HANZO_GUI_TARGET === 'web') {
+    if (process.env.GUI_TARGET === 'web') {
       return console.info(...args)
     }
     // react native doesn't log in the cli unless it's log