@hanzogui/static 7.3.0 → 8.0.0

package/src/checkDeps.ts

@@ -22,10 +22,10 @@ export type Options = {
 }
 
 // critical packages that must not be duplicated at runtime
-const CRITICAL_PACKAGES = ['@hanzogui/web', '@hanzogui/core', 'gui']
+const CRITICAL_PACKAGES = ['@hanzogui/web', '@hanzogui/core', 'hanzogui']
 
 /**
- * Walks node_modules to find duplicate physical copies of critical gui packages.
+ * Walks node_modules to find duplicate physical copies of critical hanzogui packages.
  * Detects nested node_modules that would cause multiple runtime instances.
  */
 function checkDuplicateInstalls(root: string): string {
@@ -60,7 +60,7 @@ function checkDuplicateInstalls(root: string): string {
   if (duplicates.size === 0) return ''
 
   const lines: string[] = [
-    'Found duplicate gui installations in node_modules:',
+    'Found duplicate hanzogui installations in node_modules:',
     '',
     'This causes multiple runtime instances, which breaks theme/config detection.',
     '',
@@ -92,7 +92,7 @@ function checkDuplicateInstalls(root: string): string {
 
 /**
  * Recursively find all instances of a package in node_modules.
- * Handles both scoped (@hanzogui/web) and unscoped (gui) packages.
+ * Handles both scoped (@hanzogui/web) and unscoped (hanzogui) packages.
  */
 function findAllInstances(
   nodeModulesDir: string,
@@ -139,7 +139,7 @@ function findAllInstances(
 }
 
 /**
- * Checks lockfile for multiple resolved versions of gui packages.
+ * Checks lockfile for multiple resolved versions of hanzogui packages.
  * Supports bun.lock, yarn.lock, and package-lock.json.
  */
 function checkLockfileDuplicates(root: string): string {
@@ -162,7 +162,7 @@ function checkBunLockDuplicates(lockPath: string): string {
 
     // match patterns like "@hanzogui/web@version" or "hanzogui@version" in resolved entries
     // bun.lock format: "package@version": ["resolved-url", ...]
-    const packagePattern = /["'](@hanzogui\/[\w-]+|gui)@([^"'\s,]+)["']/g
+    const packagePattern = /["'](@hanzogui\/[\w-]+|hanzogui)@([^"'\s,]+)["']/g
     let match: RegExpExecArray | null
     while ((match = packagePattern.exec(content)) !== null) {
       const name = match[1]
@@ -189,7 +189,7 @@ function checkYarnLockDuplicates(lockPath: string): string {
     // yarn.lock format:
     //   "@hanzogui/web@^1.0.0":
     //     version "1.0.1"
-    const entryPattern = /^"?(@hanzogui\/[\w-]+|gui)@[^":\n]+[":]?\s*$/gm
+    const entryPattern = /^"?(@hanzogui\/[\w-]+|hanzogui)@[^":\n]+[":]?\s*$/gm
     const versionPattern = /^\s+version\s+"([^"]+)"/gm
 
     let entryMatch: RegExpExecArray | null
@@ -260,21 +260,21 @@ function formatLockfileDuplicates(
   lines.push(
     'Multiple versions cause duplicate runtime instances, breaking config/theme detection.'
   )
-  lines.push('Fix: ensure all gui packages use the same version range, then dedupe.')
+  lines.push('Fix: ensure all hanzogui packages use the same version range, then dedupe.')
 
   return lines.join('\n')
 }
 
 /**
- * Checks that a gui config file exists in common locations.
+ * Checks that a hanzogui config file exists in common locations.
  */
 function checkConfigExists(root: string): string {
   const configNames = [
-    'gui.config.ts',
-    'gui.config.tsx',
-    'gui.config.js',
-    'gui.config.mjs',
-    'gui.config.cjs',
+    'hanzogui.config.ts',
+    'hanzogui.config.tsx',
+    'hanzogui.config.js',
+    'hanzogui.config.mjs',
+    'hanzogui.config.cjs',
   ]
 
   const searchDirs = [root, join(root, 'src'), join(root, 'app'), join(root, 'config')]
@@ -287,12 +287,12 @@ function checkConfigExists(root: string): string {
     }
   }
 
-  // check if gui.build.ts references a config path
+  // check if hanzogui.build.ts references a config path
   const buildConfigNames = [
-    'gui.build.ts',
-    'gui.build.js',
-    'gui.build.mjs',
-    'gui.build.cjs',
+    'hanzogui.build.ts',
+    'hanzogui.build.js',
+    'hanzogui.build.mjs',
+    'hanzogui.build.cjs',
   ]
   for (const name of buildConfigNames) {
     const buildPath = join(root, name)
@@ -308,13 +308,13 @@ function checkConfigExists(root: string): string {
     }
   }
 
-  // also check if there's a gui config referenced in package.json
+  // also check if there's a hanzogui config referenced in package.json
   const pkgJsonPath = join(root, 'package.json')
   if (existsSync(pkgJsonPath)) {
     try {
       const pkg = JSON.parse(readFileSync(pkgJsonPath, 'utf8'))
-      if (pkg.gui?.config) {
-        const configPath = join(root, pkg.gui.config)
+      if (pkg.hanzogui?.config) {
+        const configPath = join(root, pkg.hanzogui.config)
         if (existsSync(configPath)) return ''
       }
     } catch {}
@@ -329,12 +329,12 @@ function checkConfigExists(root: string): string {
   }
 
   return [
-    'No gui.config file found.',
+    'No hanzogui.config file found.',
     '',
-    'Gui requires a config file (e.g. gui.config.ts) that calls createGui().',
+    'Gui requires a config file (e.g. hanzogui.config.ts) that calls createGui().',
     'Without it, components will throw "Can\'t find Gui configuration" at runtime.',
     '',
-    'See: https://gui.dev/docs/core/configuration',
+    'See: https://hanzogui.dev/docs/core/configuration',
   ].join('\n')
 }
 

package/src/constants.ts

@@ -6,9 +6,9 @@ export const CSS_FILE_NAME = '__snack.css'
 export const MEDIA_SEP = '_'
 
 // ensure cache dir
-export const cacheDir = findCacheDir({ name: 'gui', create: true })
+export const cacheDir = findCacheDir({ name: 'hanzogui', create: true })
 
 export const FAILED_EVAL = Symbol('failed_style_eval')
 
 export const SHOULD_DEBUG =
-  process.env.DEBUG === '*' || process.env.DEBUG?.startsWith('gui')
+  process.env.DEBUG === '*' || process.env.DEBUG?.startsWith('hanzogui')

package/src/exports.ts

@@ -12,4 +12,5 @@ export * from './extractor/watchGuiConfig'
 export * from './extractor/createLogger'
 export * from './registerRequire'
 export { detectModuleFormat, clearFormatCache } from './extractor/detectModuleFormat'
+export { esbundleGuiConfig } from './extractor/bundle'
 export * from './getPragmaOptions'

package/src/extractor/bundle.ts

@@ -53,25 +53,54 @@ type Props = Omit<Partial<esbuild.BuildOptions>, 'entryPoints'> & {
 }
 
 function getESBuildConfig(
-  { entryPoints, resolvePlatformSpecificEntries, ...options }: Props,
+  {
+    entryPoints,
+    resolvePlatformSpecificEntries,
+    define: callerDefine,
+    ...options
+  }: Props,
   platform: GuiPlatform,
   aliases?: Record<string, string>
 ) {
-  if (process.env.DEBUG?.startsWith('gui')) {
+  if (process.env.DEBUG?.startsWith('hanzogui')) {
     console.info(`Building`, entryPoints)
   }
 
   const resolvedEntryPoints = !resolvePlatformSpecificEntries
     ? entryPoints
-    : entryPoints.map(resolveWebOrNativeSpecificEntry)
+    : entryPoints.map((entry) => resolveWebOrNativeSpecificEntry(entry, platform))
 
   // detect format from entry points if not explicitly provided by caller
   const detectedFormat = options.format || detectEntryFormat(resolvedEntryPoints[0])
 
+  // inline platform env vars for the bundled config + components.
+  // the bundled output runs in node afterward (CSS extraction time), at which
+  // point process.env reflects whatever the build tool's parent process had —
+  // not necessarily the platform we're bundling for. inlining via esbuild's
+  // define makes the bundle self-consistent regardless of host env, which
+  // matters most for vite/vxrn (which doesn't set GUI_TARGET globally
+  // because the same plugin handles native too) and for any code in the bundle
+  // graph that reads EXPO_OS (expo-modules-core's Platform.OS, etc.).
+  const platformDefines: Record<string, string> =
+    platform === 'web'
+      ? {
+          'process.env.GUI_TARGET': '"web"',
+          'process.env.EXPO_OS': '"web"',
+        }
+      : {
+          'process.env.GUI_TARGET': '"native"',
+          // EXPO_OS doesn't have a useful "native" value (it's ios/android),
+          // so leave it alone here and let the consumer set it if needed.
+        }
+
   const res: esbuild.BuildOptions = {
     bundle: true,
     entryPoints: resolvedEntryPoints,
     format: detectedFormat,
+    define: {
+      ...platformDefines,
+      ...callerDefine,
+    },
     // for ESM: prefer "module" field for resolution, add require() shim for bundled CJS deps
     ...(detectedFormat === 'esm'
       ? {
@@ -87,7 +116,7 @@ function getESBuildConfig(
     allowOverwrite: true,
     keepNames: true,
     resolveExtensions: [
-      ...(process.env.GUI_TARGET === 'web'
+      ...(platform === 'web'
         ? ['.web.tsx', '.web.ts', '.web.jsx', '.web.js']
         : ['.native.tsx', '.native.ts', '.native.jsx', '.native.js']),
       '.tsx',
@@ -148,8 +177,8 @@ function getESBuildConfig(
 
             // stub files with top-level await - they're typically runtime-only
             if (hasTopLevelAwait(contents, args.path)) {
-              if (process.env.DEBUG?.startsWith('gui')) {
-                console.info(`[gui] stubbing file with top-level await: ${args.path}`)
+              if (process.env.DEBUG?.startsWith('hanzogui')) {
+                console.info(`[hanzogui] stubbing file with top-level await: ${args.path}`)
               }
               return {
                 // Keep this as an ESM-shaped stub so esbuild doesn't inline a

package/src/extractor/bundleConfig.ts

@@ -33,7 +33,7 @@ function getDynamicEvalOutfile(name: string, format: 'esm' | 'cjs', contents: st
     .update(contents)
     .digest('hex')
     .slice(0, 10)
-  return join(process.cwd(), '.gui', `dynamic-eval-${hash}-${basename(name)}.${ext}`)
+  return join(process.cwd(), '.hanzogui', `dynamic-eval-${hash}-${basename(name)}.${ext}`)
 }
 
 function getEsbuildStdinLoader(filePath: string): esbuild.Loader {
@@ -101,7 +101,7 @@ export type LoadedComponents = {
 
 export type GuiProjectInfo = {
   components?: LoadedComponents[]
-  guiConfig?: GuiInternalConfig | null
+  hanzoguiConfig?: GuiInternalConfig | null
   nameToPaths?: NameToPaths
   cached?: boolean
 }
@@ -161,8 +161,8 @@ const handleEsmFeaturesPlugin: esbuild.Plugin = {
 
       // stub files with top-level await - they're typically runtime-only
       if (hasTopLevelAwait(contents, args.path)) {
-        if (process.env.DEBUG?.startsWith('gui')) {
-          console.info(`[gui] stubbing file with top-level await: ${args.path}`)
+        if (process.env.DEBUG?.startsWith('hanzogui')) {
+          console.info(`[hanzogui] stubbing file with top-level await: ${args.path}`)
         }
         return {
           // Keep this as an ESM-shaped stub so esbuild doesn't inline a top-level
@@ -214,6 +214,7 @@ export type BundledConfig = Exclude<Awaited<ReturnType<typeof bundleConfig>>, un
 
 // will use cached one if watching
 let currentBundle: BundledConfig | null = null
+let currentBundleKey = ''
 let isBundling = false
 let lastBundle: BundledConfig | null = null
 const waitForBundle = new Set<Function>()
@@ -230,22 +231,35 @@ let loadedConfig: GuiInternalConfig | null = null
 
 export const getLoadedConfig = () => loadedConfig
 
+function getBundleKey(props: GuiOptions) {
+  return JSON.stringify({
+    components: props.components,
+    config: props.config,
+    platform: props.platform,
+  })
+}
+
 export async function getBundledConfig(props: GuiOptions, rebuild = false) {
+  const bundleKey = getBundleKey(props)
   if (isBundling) {
     await new Promise((res) => {
       waitForBundle.add(res)
     })
-  } else if (!currentBundle || rebuild) {
+  }
+
+  if (!currentBundle || currentBundleKey !== bundleKey || rebuild) {
     return await bundleConfig(props)
   }
+
   return currentBundle
 }
 
-global.guiLastLoaded ||= 0
+global.hanzoguiLastLoaded ||= 0
 
-function updateLastLoaded(config: any) {
-  global.guiLastLoaded = Date.now()
-  global.guiLastBundledConfig = config
+function updateLastLoaded(config: any, bundleKey: string) {
+  global.hanzoguiLastLoaded = Date.now()
+  global.hanzoguiLastBundledConfig = config
+  global.hanzoguiLastBundledConfigKey = bundleKey
 }
 
 let hasBundledOnce = false
@@ -256,10 +270,15 @@ let hasBundledOnce = false
 let hasLoggedBuild = false
 
 export async function bundleConfig(props: GuiOptions) {
+  const bundleKey = getBundleKey(props)
   // webpack is calling this a ton for no reason
-  if (global.guiLastBundledConfig && Date.now() - global.guiLastLoaded < 3000) {
+  if (
+    global.hanzoguiLastBundledConfig &&
+    global.hanzoguiLastBundledConfigKey === bundleKey &&
+    Date.now() - global.hanzoguiLastLoaded < 3000
+  ) {
     // just loaded recently
-    return global.guiLastBundledConfig
+    return global.hanzoguiLastBundledConfig
   }
 
   try {
@@ -268,11 +287,11 @@ export async function bundleConfig(props: GuiOptions) {
     const configEntry = props.config
       ? getGuiConfigPathFromOptionsConfig(props.config)
       : ''
-    const tmpDir = join(process.cwd(), '.gui')
+    const tmpDir = join(process.cwd(), '.hanzogui')
     // detect module format from config entry point
     const configFormat = configEntry ? detectModuleFormat(configEntry) : 'cjs'
     const configExt = configFormat === 'esm' ? '.mjs' : '.cjs'
-    const configOutPath = join(tmpDir, `gui.config${configExt}`)
+    const configOutPath = join(tmpDir, `hanzogui.config${configExt}`)
     const baseComponents = (props.components || []).filter((x) => x !== '@hanzogui/core')
     // detect format per component module
     const componentFormats: Array<'esm' | 'cjs'> = baseComponents.map((mod) => {
@@ -297,7 +316,7 @@ export async function bundleConfig(props: GuiOptions) {
 
     if (
       process.env.NODE_ENV === 'development' &&
-      process.env.DEBUG?.startsWith('gui')
+      process.env.DEBUG?.startsWith('hanzogui')
     ) {
       console.info(`Building config entry`, configEntry)
     }
@@ -371,10 +390,10 @@ export async function bundleConfig(props: GuiOptions) {
         colorLog(
           Color.FgYellow,
           `
-  ➡ [gui] built config, components, prompt (${Date.now() - start}ms)`
+  ➡ [hanzogui] built config, components, prompt (${Date.now() - start}ms)`
         )
 
-        if (process.env.DEBUG?.startsWith('gui')) {
+        if (process.env.DEBUG?.startsWith('hanzogui')) {
           colorLog(
             Color.Dim,
             `
@@ -427,7 +446,7 @@ export async function bundleConfig(props: GuiOptions) {
     // check for ProxyWorm - indicates a module loading error
     if (config._isProxyWorm) {
       throw new Error(
-        `Got a proxied config - likely a module loading error. Set DEBUG=gui for details.`
+        `Got a proxied config - likely a module loading error. Set DEBUG=hanzogui for details.`
       )
     }
 
@@ -459,7 +478,7 @@ export async function bundleConfig(props: GuiOptions) {
         component.moduleName
 
       if (!component.moduleName) {
-        if (process.env.DEBUG?.includes('gui') || process.env.IS_GUI_DEV) {
+        if (process.env.DEBUG?.includes('hanzogui') || process.env.IS_GUI_DEV) {
           console.warn(
             `⚠️ no module name found: ${component.moduleName} ${JSON.stringify(
               baseComponents
@@ -471,7 +490,7 @@ export async function bundleConfig(props: GuiOptions) {
 
     if (
       process.env.NODE_ENV === 'development' &&
-      process.env.DEBUG?.startsWith('gui')
+      process.env.DEBUG?.startsWith('hanzogui')
     ) {
       console.info('Loaded components', components)
     }
@@ -479,18 +498,19 @@ export async function bundleConfig(props: GuiOptions) {
     const res = {
       components,
       nameToPaths: {},
-      guiConfig: config,
+      hanzoguiConfig: config,
     }
 
     currentBundle = res
-    updateLastLoaded(res)
+    currentBundleKey = bundleKey
+    updateLastLoaded(res, bundleKey)
 
     return res
   } catch (err: any) {
     console.error(
-      `Error bundling gui config: ${err?.message} (run with DEBUG=gui to see stack)`
+      `Error bundling hanzogui config: ${err?.message} (run with DEBUG=hanzogui to see stack)`
     )
-    if (process.env.DEBUG?.includes('gui')) {
+    if (process.env.DEBUG?.includes('hanzogui')) {
       console.error(err.stack)
     }
   } finally {
@@ -502,7 +522,7 @@ export async function bundleConfig(props: GuiOptions) {
 
 export async function writeGuiCSS(outputCSS: string, config: GuiInternalConfig) {
   const flush = async () => {
-    colorLog(Color.FgYellow, `  ➡ [gui] output css: ${outputCSS}`)
+    colorLog(Color.FgYellow, `  ➡ [hanzogui] output css: ${outputCSS}`)
     await FS.writeFile(outputCSS, css)
   }
 
@@ -624,7 +644,7 @@ export async function loadComponentsInner(
           })
         }
 
-        if (process.env.DEBUG === 'gui') {
+        if (process.env.DEBUG === 'hanzogui') {
           console.info(`loadModule`, loadModule, format)
         }
 
@@ -666,7 +686,7 @@ export async function loadComponentsInner(
       } catch (err) {
         console.info('babel err', err, writtenContents)
         writtenContents = fileContents
-        if (process.env.DEBUG?.startsWith('gui')) {
+        if (process.env.DEBUG?.startsWith('hanzogui')) {
           console.info(`Error parsing babel likely`, err)
         }
 
@@ -779,7 +799,7 @@ export function loadComponentsInnerSync(
           })
         }
 
-        if (process.env.DEBUG === 'gui') {
+        if (process.env.DEBUG === 'hanzogui') {
           console.info(`loadModule`, loadModule, require.resolve(loadModule))
         }
 
@@ -814,7 +834,7 @@ export function loadComponentsInnerSync(
       } catch (err) {
         console.info('babel err', err, writtenContents)
         writtenContents = fileContents
-        if (process.env.DEBUG?.startsWith('gui')) {
+        if (process.env.DEBUG?.startsWith('hanzogui')) {
           console.info(`Error parsing babel likely`, err)
         }
       } finally {

package/src/extractor/concatClassName.ts

@@ -45,24 +45,9 @@ export function concatClassName(_cn: Record<string, any> | null | undefined): st
         continue
       }
 
-      const nextChar = name[splitIndex + 1]
-      // synced to static-ui constants
-      // MEDIA_SEP
-      const isMediaQuery = nextChar === '_'
-      // PSEUDO_SEP
-      // commenting out three things to make pseudos override properly
-      // (leave in for a bit to see if other bugs pop up later):
-      // 1. const isPseudoQuery = nextChar === '0'
       const styleKey = name.slice(1, name.indexOf('-'))
-      // 2. isMediaQuery || isPseudoQuery
-      // extract just the media query name (e.g., 'lg' '_pr-_lg_260px')
-      // by finding the underscore after the media key name
-      const mediaStart = splitIndex + 2
-      const mediaEnd = name.indexOf('_', mediaStart)
-      const mediaKey =
-        isMediaQuery && mediaEnd > mediaStart ? name.slice(mediaStart, mediaEnd) : null
-      const uid = mediaKey ? styleKey + mediaKey : styleKey
-      // 3. && !isPseudoQuery
+      const { mediaKey, pseudoKey } = getClassNameScope(name, splitIndex)
+      const uid = `${styleKey}${mediaKey ? `@${mediaKey}` : ''}${pseudoKey ? `:${pseudoKey}` : ''}`
 
       if (usedPrefixes.has(uid)) {
         // if (shouldDebug) console.log('debug exclude:', usedPrefixes, name)
@@ -75,8 +60,8 @@ export function concatClassName(_cn: Record<string, any> | null | undefined): st
       if (propName && propObjects) {
         if (
           propObjects.some((po) => {
-            if (mediaKey) {
-              const propKey = pseudoInvert[mediaKey]
+            if (pseudoKey) {
+              const propKey = pseudoInvert[pseudoKey]
               return po && po[propKey] && propName in po[propKey] && po[propKey] !== null
             }
             const res = po && propName in po && po[propName] !== null
@@ -95,11 +80,43 @@ export function concatClassName(_cn: Record<string, any> | null | undefined): st
   return final.trim()
 }
 
+function getClassNameScope(name: string, splitIndex: number) {
+  let mediaKey = ''
+  let pseudoKey = ''
+  let valueStart = splitIndex + 1
+
+  if (name[valueStart] === '_') {
+    const mediaEnd = name.indexOf('_', valueStart + 1)
+    if (mediaEnd > valueStart + 1) {
+      mediaKey = name.slice(valueStart + 1, mediaEnd)
+      valueStart = mediaEnd + 1
+    }
+  }
+
+  if (name[valueStart] === '0') {
+    const pseudoStart = valueStart + 1
+    for (const nextPseudoKey of pseudoKeys) {
+      if (name.startsWith(`${nextPseudoKey}-`, pseudoStart)) {
+        pseudoKey = nextPseudoKey
+        break
+      }
+    }
+  }
+
+  return { mediaKey, pseudoKey }
+}
+
 const pseudoInvert = {
   hover: 'hoverStyle',
+  active: 'pressStyle',
   focus: 'focusStyle',
-  press: 'pressStyle',
+  'focus-visible': 'focusVisibleStyle',
+  'focus-within': 'focusWithinStyle',
   focusVisible: 'focusVisibleStyle',
   focusWithin: 'focusWithinStyle',
   disabled: 'disabledStyle',
+  enter: 'enterStyle',
+  exit: 'exitStyle',
 }
+
+const pseudoKeys = Object.keys(pseudoInvert).sort((a, b) => b.length - a.length)