@hanzogui/web 2.0.0

package/src/eventHandling.native.ts

@@ -0,0 +1,184 @@
+/**
+ * Native event handling - uses RNGH when available, falls back to usePressability
+ */
+
+import { composeEventHandlers } from '@hanzogui/helpers'
+import { getGestureHandler } from '@hanzogui/native'
+import React, { useRef } from 'react'
+import { useMainThreadPressEvents } from './helpers/mainThreadPressEvents'
+import type { StaticConfig, GuiComponentStateRef } from './types'
+
+// web events not used on native
+export function getWebEvents() {
+  return {}
+}
+
+export function useEvents(
+  events: any,
+  viewProps: any,
+  stateRef: { current: GuiComponentStateRef },
+  staticConfig: StaticConfig,
+  isHOC?: boolean,
+  isInsideNativeMenu?: boolean
+) {
+  // focus/blur events always attached directly
+  if (events) {
+    if (events.onFocus) {
+      viewProps['onFocus'] = events.onFocus
+    }
+    if (events.onBlur) {
+      viewProps['onBlur'] = events.onBlur
+    }
+  }
+
+  const hasPressEvents =
+    // its stable and always on if you have in/out/regular
+    events?.onPress
+
+  const gh = getGestureHandler()
+
+  // track if we ever had press events to avoid re-parenting / hooks issues
+  if (hasPressEvents) {
+    stateRef.current.hasHadEvents = true
+  }
+
+  // avoid hooks/reparenting
+  const everEnabled = Boolean(hasPressEvents || stateRef.current.hasHadEvents)
+  const isUsingRNGH = gh.isEnabled
+
+  // NOW handle early returns (after all hooks are called)
+  // THESE BRANCHES ARE NEVER CHANGING RENDER-TO-RENDER
+
+  // input special case - TextInput needs press events attached directly (not via RNGH)
+  if (staticConfig.isInput) {
+    if (events) {
+      const { onPressIn, onPressOut, onPress } = events
+      const inputEvents: any = {
+        onPressIn,
+        onPressOut: onPressOut || onPress,
+      }
+      if (onPressOut && onPress) {
+        // only supports onPressIn and onPressOut so combine them
+        inputEvents.onPressOut = composeEventHandlers(onPress, onPressOut)
+      }
+      Object.assign(viewProps, inputEvents)
+    }
+
+    // inputs don't use gesture handler
+    return null
+  }
+
+  // HOC special case - pass press events to the inner component instead of wrapping
+  // HOC components may return null which crashes GestureDetector (it tries to access
+  // _internalInstanceHandle on a null native view). By passing events down, the inner
+  // component handles gesture detection at its own level.
+  if (isHOC) {
+    if (events) {
+      const { onPressIn, onPressOut, onPress, onLongPress, delayLongPress } = events
+      Object.assign(viewProps, {
+        onPressIn,
+        onPressOut,
+        onPress,
+        onLongPress,
+        delayLongPress,
+      })
+    }
+    // HOCs don't use gesture handler at this level
+    return null
+  }
+
+  // rngh path - logic (hooks already called above)
+  if (isUsingRNGH) {
+    // rngh path - hooks
+    const callbacksRef = useRef<any>(isUsingRNGH ? {} : null)
+    const gestureRef = useRef<any>(null)
+
+    if (everEnabled) {
+      // store callbacks in refs so gesture doesn't need to be recreated on every render
+      callbacksRef.current = hasPressEvents
+        ? {
+            onPressIn: events.onPressIn,
+            onPressOut: events.onPressOut,
+            onPress: events.onPress,
+            onLongPress: events.onLongPress,
+          }
+        : {}
+
+      // only create gesture once, callbacks are read from ref
+      if (!gestureRef.current) {
+        if (isInsideNativeMenu) {
+          // Inside native menus on Android: use Manual gesture with manualActivation
+          // so it never goes ACTIVE (which would send ACTION_CANCEL to MenuView).
+          // Press callbacks fire via onTouchesDown/Up instead.
+          const { Gesture } = gh.state
+          const manual = Gesture.Manual()
+            .runOnJS(true)
+            .manualActivation(true)
+            .onTouchesDown(() => {
+              callbacksRef.current.onPressIn?.({})
+            })
+            .onTouchesUp(() => {
+              callbacksRef.current.onPress?.({})
+              callbacksRef.current.onPressOut?.({})
+            })
+            .onTouchesCancelled(() => {
+              callbacksRef.current.onPressOut?.({})
+            })
+          gestureRef.current = manual
+        } else {
+          gestureRef.current = gh.createPressGesture({
+            onPressIn: (e: any) => callbacksRef.current.onPressIn?.(e),
+            onPressOut: (e: any) => callbacksRef.current.onPressOut?.(e),
+            onPress: (e: any) => callbacksRef.current.onPress?.(e),
+            onLongPress: (e: any) => callbacksRef.current.onLongPress?.(e),
+            delayLongPress: events?.delayLongPress,
+            hitSlop: viewProps.hitSlop,
+          })
+        }
+      }
+      // TODO update viewProps.hitSlop / events.delayLongPress!
+
+      return gestureRef.current
+    }
+
+    return null
+  }
+
+  // fallback - use usePressability when RNGH not enabled
+  // split into separate file to avoid deep import warnings
+  useMainThreadPressEvents(events, viewProps, hasPressEvents)
+
+  return null
+}
+
+export function wrapWithGestureDetector(
+  content: any,
+  gesture: any,
+  stateRef: { current: GuiComponentStateRef },
+  isHOC?: boolean
+) {
+  // Skip wrapping for HOC components - they may return null which crashes GestureDetector
+  // (GestureDetector tries to access _internalInstanceHandle on a null native view)
+  if (isHOC) {
+    return content
+  }
+
+  const gh = getGestureHandler()
+  const { GestureDetector, Gesture } = gh.state
+
+  // avoid re-parenting: only wrap if we ever had press events
+  const shouldWrap = stateRef.current.hasHadEvents
+
+  if (!GestureDetector || !shouldWrap) {
+    return content
+  }
+
+  // use actual gesture or no-op Manual gesture to maintain tree structure
+  const gestureToUse = gesture || Gesture?.Manual()
+
+  if (!gestureToUse) {
+    return content
+  }
+
+  return React.createElement(GestureDetector, { gesture: gestureToUse }, content)
+}

package/src/eventHandling.ts

@@ -0,0 +1,44 @@
+/**
+ * Web event handling - maps RN-style events to DOM events
+ */
+
+import type { GuiComponentEvents } from './interfaces/GuiComponentEvents'
+
+type EventKeys = keyof GuiComponentEvents
+type EventLikeObject = { [key in EventKeys]?: any }
+
+export function getWebEvents<E extends EventLikeObject>(events: E, webStyle = true) {
+  return {
+    onMouseEnter: events.onMouseEnter,
+    onMouseLeave: events.onMouseLeave,
+    [webStyle ? 'onClick' : 'onPress']: events.onPress,
+    onMouseDown: events.onPressIn,
+    onMouseUp: events.onPressOut,
+    onTouchStart: events.onPressIn,
+    onTouchEnd: events.onPressOut,
+    onFocus: events.onFocus,
+    onBlur: events.onBlur,
+  }
+}
+
+// web doesn't need wrapping - events go directly on element
+export function wrapWithGestureDetector(
+  content: any,
+  _gesture: any,
+  _stateRef: { current: any },
+  _isHOC?: boolean
+) {
+  return content
+}
+
+// no-op on web, events attached via getWebEvents
+export function useEvents(
+  _events: any,
+  _viewProps: any,
+  _stateRef: { current: any },
+  _staticConfig: any,
+  _isHOC?: boolean,
+  _isInsideNativeMenu?: boolean
+) {
+  return null
+}

package/src/helpers/consoleLog.native.ts

@@ -0,0 +1,2 @@
+export const groupEnd = () => {}
+export const groupCollapsed = console.info

package/src/helpers/createDesignSystem.ts

@@ -0,0 +1,264 @@
+import { isWeb } from '@hanzogui/constants'
+import type { CreateGuiProps, Variable } from '../types'
+import { getVariableVariable, isVariable } from '../createVariable'
+import { autoVariables, registerCSSVariable, variableToCSS } from './registerCSSVariable'
+import { getThemeCSSRules } from './getThemeCSSRules'
+import { getAllRules } from './insertStyleRule'
+
+type ThemeConfig = {
+  cssRuleSets: string[]
+  getThemeRulesSets: () => string[]
+}
+
+// helper to get font property CSS declarations
+function getFontPropertyDeclarations(
+  fontParsed: any,
+  tokenKey: string = '$true'
+): string[] {
+  const props: string[] = ['font-family: var(--f-family)']
+
+  const getVarRef = (obj: any) => {
+    const val = obj?.[tokenKey]
+    if (isVariable(val)) {
+      return getVariableVariable(val)
+    }
+    return undefined
+  }
+
+  const letterSpacing = getVarRef(fontParsed.letterSpacing)
+  if (letterSpacing) props.push(`letter-spacing: ${letterSpacing}`)
+
+  const lineHeight = getVarRef(fontParsed.lineHeight)
+  if (lineHeight) props.push(`line-height: ${lineHeight}`)
+
+  const fontStyle = getVarRef(fontParsed.style)
+  if (fontStyle) props.push(`font-style: ${fontStyle}`)
+
+  const fontWeight = getVarRef(fontParsed.weight)
+  if (fontWeight) props.push(`font-weight: ${fontWeight}`)
+
+  return props
+}
+
+export { getFontPropertyDeclarations }
+
+/**
+ * Generates CSS for tokens - registers CSS variables and builds declaration strings
+ */
+export function createTokenCSS(
+  tokens: Record<string, Record<string, Variable>>,
+  shouldTokenCategoryHaveUnits: (category: string) => boolean
+): string[] {
+  if (!process.env.HANZO_GUI_DID_OUTPUT_CSS) {
+    const declarations: string[] = []
+    const sortedTokenKeys = Object.keys(tokens).sort()
+
+    for (const key of sortedTokenKeys) {
+      const sortedSubKeys = Object.keys(tokens[key]).sort()
+      for (const skey of sortedSubKeys) {
+        const variable = tokens[key][skey] as Variable
+
+        if (isWeb) {
+          registerCSSVariable(variable)
+          const variableNeedsPx = variable.needsPx === true
+          const categoryNeedsPx = shouldTokenCategoryHaveUnits(key)
+          const shouldBeUnitless = !(variableNeedsPx || categoryNeedsPx)
+          declarations.push(variableToCSS(variable, shouldBeUnitless))
+        }
+      }
+    }
+
+    return declarations
+  }
+  return []
+}
+
+/**
+ * Generates CSS for fonts
+ */
+export function createFontCSS(
+  fontsParsed: Record<string, any> | undefined,
+  registerFontVariables: (fontParsed: any) => string[]
+): Record<
+  string,
+  { name: string; declarations: string[]; language?: string; fontParsed: any }
+> {
+  if (!process.env.HANZO_GUI_DID_OUTPUT_CSS) {
+    const fontDeclarations: Record<
+      string,
+      { name: string; declarations: string[]; language?: string; fontParsed: any }
+    > = {}
+
+    if (!fontsParsed) return fontDeclarations
+
+    const sortedFontKeys = Object.keys(fontsParsed).sort()
+    for (const key of sortedFontKeys) {
+      const fontParsed = fontsParsed[key]
+      const [name, language] = key.includes('_') ? key.split('_') : [key]
+      const fontVars = registerFontVariables(fontParsed)
+      fontDeclarations[key] = {
+        name: name.slice(1),
+        declarations: fontVars,
+        language,
+        fontParsed,
+      }
+    }
+
+    return fontDeclarations
+  }
+  return {}
+}
+
+/**
+ * Builds CSS rulesets from declarations
+ */
+export function buildCSSRuleSets(
+  declarations: string[],
+  fontDeclarations: Record<
+    string,
+    { name: string; declarations: string[]; language?: string; fontParsed: any }
+  >,
+  defaultFontToken: string = '$true'
+): string[] {
+  if (!process.env.HANZO_GUI_DID_OUTPUT_CSS) {
+    const cssRuleSets: string[] = []
+    const sep = ' '
+
+    function declarationsToRuleSet(decs: string[], selector = '') {
+      return `:root${selector} {${sep}${[...decs].join(`;${sep}`)}\n}`
+    }
+
+    // non-font tokens
+    if (declarations.length) {
+      cssRuleSets.push(declarationsToRuleSet(declarations))
+    }
+
+    // fonts - each font_* sets CSS variables
+    const fontSelectors: string[] = []
+    const sortedFontDeclarationKeys = Object.keys(fontDeclarations).sort()
+    for (const key of sortedFontDeclarationKeys) {
+      const { name, declarations, language = 'default' } = fontDeclarations[key]
+      const fontSelector = `.font_${name}`
+      fontSelectors.push(fontSelector)
+      const langSelector = `:root .t_lang-${name}-${language} ${fontSelector}`
+      const selectors =
+        language === 'default' ? ` ${fontSelector}, ${langSelector}` : langSelector
+      const specificRuleSet = declarationsToRuleSet(declarations, selectors)
+      cssRuleSets.push(specificRuleSet)
+    }
+
+    // shared rule: all font_* classes + is_View apply font properties
+    // this resets fonts on Views like React Native does
+    if (fontSelectors.length) {
+      const firstFont = fontDeclarations[sortedFontDeclarationKeys[0]]
+      if (firstFont?.fontParsed) {
+        const fontProps = getFontPropertyDeclarations(
+          firstFont.fontParsed,
+          defaultFontToken
+        )
+        const sharedSelectors = [...fontSelectors, '.is_View'].join(', ')
+        cssRuleSets.push(`${sharedSelectors} {${fontProps.join('; ')}}`)
+      }
+    }
+
+    return cssRuleSets
+  }
+  return []
+}
+
+/**
+ * Generates theme CSS rules
+ */
+export function createThemeCSS(
+  dedupedThemes: Array<{ names: string[]; theme: any }>,
+  configIn: CreateGuiProps
+): string[] {
+  if (!process.env.HANZO_GUI_DID_OUTPUT_CSS) {
+    let themeRuleSets: string[] = []
+
+    if (isWeb) {
+      for (const { names, theme } of dedupedThemes) {
+        const nextRules = getThemeCSSRules({
+          config: configIn,
+          themeName: names[0],
+          names,
+          theme,
+        })
+        themeRuleSets = [...themeRuleSets, ...nextRules]
+      }
+    }
+
+    return themeRuleSets
+  }
+  return []
+}
+
+/**
+ * Gets all generated CSS - design system + runtime styles
+ */
+export function getCSS(
+  themeConfig: ThemeConfig,
+  opts: {
+    separator?: string
+    sinceLastCall?: boolean
+    exclude?: 'themes' | 'design-system' | string | null
+  } = {},
+  lastIndex: { value: number }
+): string {
+  if (!process.env.HANZO_GUI_DID_OUTPUT_CSS && process.env.HANZO_GUI_TARGET === 'web') {
+    const { separator = '\n', sinceLastCall, exclude } = opts
+
+    if (sinceLastCall && lastIndex.value >= 0) {
+      const rules = getAllRules()
+      const newRules = rules.slice(lastIndex.value)
+      lastIndex.value = rules.length
+      return newRules.join(separator)
+    }
+
+    lastIndex.value = 0
+
+    const runtimeStyles = getAllRules().join(separator)
+
+    if (exclude === 'design-system') {
+      return runtimeStyles
+    }
+
+    const themeRules = exclude ? '' : themeConfig.getThemeRulesSets().join(separator)
+
+    // auto-generated vars from theme values not in tokens
+    const autoVarCSS = autoVariables.length
+      ? `:root{${autoVariables.map((v) => `--${v.name}:${v.val}`).join(';')}}`
+      : ''
+
+    // notes:
+    // @scope (.is_Text) to (.is_View) - inherit text styles in nested Text without View boundary
+    // display: inline breaks css transform styles
+
+    // !important or else random css easily overrides, the prop is absolute (local-first styling)
+    const hideScrollBarsCSS = `._hsb-x::-webkit-scrollbar:horizontal { display: none !important; }
+._hsb-y::-webkit-scrollbar:vertical { display: none !important; }
+._hsb-x { scrollbar-width: none !important; }
+._hsb-y { scrollbar-width: none !important; }`
+    const pointerEventsCSS = `:root ._pe-boxonly>* {pointer-events:none;}
+:root ._pe-boxnone>* {pointer-events:auto;}`
+
+    const designSystem = `._ovs-contain {overscroll-behavior:contain;}
+.t_unmounted .is_View, .t_unmounted .is_Text { transition: none !important; }
+.is_View { display: flex; align-items: stretch; flex-direction: column; flex-basis: auto; box-sizing: border-box; min-height: 0; min-width: 0; flex-shrink: 0; }
+.is_Text { display: inline; box-sizing: border-box; word-wrap: break-word; white-space: pre-wrap; margin: 0; }
+@scope (.is_Text) to (.is_View) { .is_Text { white-space: inherit; word-wrap: inherit; } }
+._dsp_contents {display:contents;}
+._no_backdrop::backdrop {display: none;}
+.is_Input::selection, .is_TextArea::selection {background-color: var(--selectionColor);}
+.is_Input::placeholder, .is_TextArea::placeholder {color: var(--placeholderColor);}
+${pointerEventsCSS}
+${hideScrollBarsCSS}
+${autoVarCSS}
+${themeConfig.cssRuleSets.join(separator)}`
+
+    return `${designSystem}
+${themeRules}
+${runtimeStyles}`
+  }
+  return ''
+}

package/src/helpers/createMediaStyle.ts

@@ -0,0 +1,167 @@
+import { getSetting } from '../config'
+import { mediaObjectToString } from './mediaObjectToString'
+import type { IsMediaType, MediaQueries, MediaStyleObject, StyleObject } from '../types'
+import { getGroupPropParts, type GroupParts } from './getGroupPropParts'
+
+// TODO have this be used by extractMediaStyle in hanzo-gui static
+// not synced to static/constants for now
+export const MEDIA_SEP = '_'
+
+let prefixes: Record<string, string> | null = null
+let selectors: Record<string, string> | null = null
+
+// call this when media config changes to reset cached prefixes/selectors
+export function resetMediaStyleCache() {
+  prefixes = null
+  selectors = null
+}
+
+const groupPseudoToPseudoCSSMap = {
+  press: 'active',
+  focusVisible: 'focus-visible',
+  focusWithin: 'focus-within',
+}
+
+const specificities = new Array(12)
+  .fill(0)
+  .map((_, i) => new Array(i).fill(':root').join(''))
+
+function getThemeOrGroupSelector(
+  name: string,
+  styleInner: string,
+  isGroup: boolean,
+  groupParts: GroupParts,
+  isTheme = false,
+  precedenceImportancePrefix = ''
+) {
+  const selectorStart = styleInner.lastIndexOf(':root') + 5
+  const selectorEnd = styleInner.lastIndexOf('{')
+  const selector = styleInner.slice(selectorStart, selectorEnd)
+  const precedenceSpace = getSetting('addThemeClassName') !== false && isTheme ? '' : ' '
+  const pseudoSelectorName = groupParts.pseudo
+    ? groupPseudoToPseudoCSSMap[groupParts.pseudo] || groupParts.pseudo
+    : undefined
+
+  const pseudoSelector = pseudoSelectorName ? `:${pseudoSelectorName}` : ''
+  const presedencePrefix = `:root${precedenceImportancePrefix}${precedenceSpace}`
+  const mediaSelector = `.t_${isGroup ? 'group_' : ''}${name}${pseudoSelector}`
+  return [
+    selector,
+    `${presedencePrefix}${mediaSelector} ${selector.replaceAll(':root', '')}`,
+  ] as const
+}
+
+export const createMediaStyle = (
+  styleObject: StyleObject,
+  mediaKeyIn: string,
+  mediaQueries: MediaQueries,
+  type: IsMediaType,
+  negate?: boolean,
+  priority?: number
+): MediaStyleObject => {
+  const [property, , identifier, pseudoIn, rules] = styleObject
+  const isTheme = type === 'theme'
+  const isPlatform = type === 'platform'
+  const isGroup = type === 'group'
+  const isNonWindowMedia = isTheme || isPlatform || isGroup
+  const negKey = negate ? '0' : ''
+  const ogPrefix = identifier.slice(0, identifier.indexOf('-') + 1)
+  const id = `${ogPrefix}${MEDIA_SEP}${mediaKeyIn.replace('-', '')}${negKey}${MEDIA_SEP}`
+
+  let styleRule = ''
+  let groupPriority = ''
+  let groupMediaKey: string | undefined
+  let containerName: string | undefined
+  let nextIdentifier = identifier.replace(ogPrefix, id)
+  let styleInner = rules
+    .map((rule) => rule.replaceAll(identifier, nextIdentifier))
+    .join(';')
+  let isHover = false
+
+  if (isNonWindowMedia) {
+    let specificity = (priority || 0) + (isGroup || isPlatform ? 1 : 0)
+
+    if (isTheme || isGroup) {
+      const groupParts = getGroupPropParts(isTheme ? 'theme-' + mediaKeyIn : mediaKeyIn)
+      const { name, media, pseudo } = groupParts
+      groupMediaKey = media
+      if (isGroup) {
+        containerName = name
+      }
+      if (pseudo === 'press' || pseudoIn === 'active') {
+        specificity += 2
+      }
+      if (pseudo === 'hover') {
+        isHover = true
+      }
+      const [selector, nextSelector] = getThemeOrGroupSelector(
+        name,
+        styleInner,
+        isGroup,
+        groupParts,
+        isTheme,
+        specificities[specificity]
+      )
+      // const selectors = `${nextSelector}, :root${nextSelector}`
+      // add back in the { we used to split
+      styleRule = styleInner.replace(selector, nextSelector)
+    } else {
+      const prefix = specificities[specificity]
+      // when styleInner is wrapped in @media (eg hover), inject specificity
+      // inside the block — `:root@media ...` is invalid CSS
+      styleRule =
+        prefix && styleInner[0] === '@'
+          ? styleInner.replace('{', `{${prefix}`)
+          : `${prefix}${styleInner}`
+    }
+  }
+
+  if (!isNonWindowMedia || groupMediaKey) {
+    // one time cost:
+    // TODO MOVE THIS INTO SETUP AREA AND EXPORT IT
+    if (!selectors) {
+      const mediaKeys = Object.keys(mediaQueries)
+      selectors = Object.fromEntries(
+        mediaKeys.map((key) => [key, mediaObjectToString(mediaQueries[key])])
+      )
+      prefixes = Object.fromEntries(
+        mediaKeys.map((k, index) => [k, new Array(index + 1).fill(':root').join('')])
+      )
+    }
+
+    const mediaKey = groupMediaKey || mediaKeyIn
+    const mediaSelector = selectors[mediaKey]
+    const screenStr = negate ? 'not all and ' : ''
+    const mediaQuery = `${screenStr}${mediaSelector}`
+    const precedenceImportancePrefix = groupMediaKey ? groupPriority : prefixes![mediaKey]
+    const prefix = groupMediaKey ? `@container ${containerName}` : '@media'
+
+    if (groupMediaKey) {
+      styleInner = styleRule
+    }
+
+    // combines media queries if they already exist
+    if (styleInner.includes(prefix)) {
+      // combine
+      styleRule = styleInner
+        .replace('{', ` and ${mediaQuery} {`)
+        // temp bugfix can be better done
+        .replace(`and screen and`, `and`)
+    } else {
+      styleRule = `${prefix} ${mediaQuery}{${precedenceImportancePrefix}${styleInner}}`
+    }
+
+    // add @supports for legacy browser support to not break container queries
+    if (groupMediaKey) {
+      styleRule = `@supports (contain: ${
+        getSetting('webContainerType') || 'inline-size'
+      }) {${styleRule}}`
+    }
+  }
+
+  if (isHover) {
+    styleRule = `@media (hover:hover){${styleRule}}`
+  }
+
+  return [property, undefined, nextIdentifier, undefined, [styleRule]]
+}