@hanzogui/web 2.0.0

package/src/views/Configuration.tsx

@@ -0,0 +1,20 @@
+import { ClientOnly } from '@hanzogui/use-did-finish-ssr'
+import React from 'react'
+import { ComponentContext } from '../contexts/ComponentContext'
+import type { AnimationDriver } from '../types'
+
+interface ConfigurationProps {
+  animationDriver?: AnimationDriver | null
+  disableSSR?: boolean
+  children: React.ReactNode
+}
+
+export const Configuration = (props: ConfigurationProps) => {
+  const current = React.useContext(ComponentContext)
+
+  return (
+    <ClientOnly enabled={props.disableSSR ?? current.disableSSR}>
+      <ComponentContext.Provider {...current} {...props} />
+    </ClientOnly>
+  )
+}

package/src/views/FontLanguage.native.tsx

@@ -0,0 +1,13 @@
+import React from 'react'
+import { ComponentContext } from '../contexts/ComponentContext'
+import type { FontLanguageProps } from '../types'
+
+export function FontLanguage({ children, ...props }: FontLanguageProps) {
+  const parentProps = React.useContext(ComponentContext)
+  const language = React.useMemo(() => props, [JSON.stringify(props)])
+  return (
+    <ComponentContext.Provider {...parentProps} language={language}>
+      {children}
+    </ComponentContext.Provider>
+  )
+}

package/src/views/FontLanguage.tsx

@@ -0,0 +1,18 @@
+import type { FontLanguageProps } from '../types'
+
+export const FontLanguage = ({ children, ...props }: FontLanguageProps) => {
+  return (
+    <div
+      style={{
+        display: 'contents',
+      }}
+      className={Object.entries(props)
+        .map(([name, language]) => `t_lang-${name}-${language}`)
+        .join(' ')}
+    >
+      {children}
+    </div>
+  )
+}
+
+FontLanguage['displayName'] = 'FontLanguage'

package/src/views/GuiProvider.tsx

@@ -0,0 +1,95 @@
+import { useIsomorphicLayoutEffect } from '@hanzogui/constants'
+import { ClientOnly } from '@hanzogui/use-did-finish-ssr'
+import React, { useEffect } from 'react'
+import { getSetting } from '../config'
+import { ComponentContext } from '../contexts/ComponentContext'
+import { stopAccumulatingRules } from '../helpers/insertStyleRule'
+import { updateMediaListeners } from '../hooks/useMedia'
+import { resolveAnimationDriver } from '../helpers/resolveAnimationDriver'
+import type { AnimationDriver, GuiProviderProps } from '../types'
+import { GuiRoot } from './GuiRoot'
+import { ThemeProvider } from './ThemeProvider'
+
+// cache first theme key per config to avoid Object.keys allocation on every render
+let _cachedFirstKey: string | undefined
+let _cachedConfig: any
+
+function firstThemeKey(config: any): string | undefined {
+  if (config !== _cachedConfig) {
+    _cachedConfig = config
+    _cachedFirstKey = config?.themes ? Object.keys(config.themes)[0] : undefined
+  }
+  return _cachedFirstKey
+}
+
+export function GuiProvider({
+  children,
+  disableInjectCSS,
+  config,
+  className,
+  defaultTheme: defaultThemeProp,
+  reset,
+  insets,
+}: GuiProviderProps) {
+  // fall back to first theme when defaultTheme is null/undefined
+  // (e.g. useColorScheme() returns null on first render in RN 0.83+)
+  const defaultTheme = defaultThemeProp || firstThemeKey(config) || 'light'
+  useIsomorphicLayoutEffect(() => {
+    stopAccumulatingRules()
+    updateMediaListeners()
+  }, [])
+
+  const memoizedInsets = React.useMemo(
+    () => insets,
+    [insets?.top, insets?.right, insets?.bottom, insets?.left]
+  )
+
+  // Get the default animation driver from config
+  // config.animations is already normalized to the default driver in createGui
+  // resolveAnimationDriver handles edge cases where raw multi-driver object leaks through
+  const defaultAnimationDriver: AnimationDriver | null = React.useMemo(
+    () => resolveAnimationDriver(config?.animations),
+    [config?.animations]
+  )
+
+  useEffect(() => {
+    defaultAnimationDriver?.onMount?.()
+  }, [])
+
+  let contents = (
+    <ComponentContext.Provider
+      animationDriver={defaultAnimationDriver}
+      insets={memoizedInsets}
+    >
+      <ThemeProvider defaultTheme={defaultTheme} reset={reset} className={className}>
+        <GuiRoot theme={defaultTheme} isRootRoot>
+          {children}
+        </GuiRoot>
+      </ThemeProvider>
+    </ComponentContext.Provider>
+  )
+
+  if (getSetting('disableSSR')) {
+    // never changes so conditional render fine, no re-parenting risk
+    contents = <ClientOnly enabled>{contents}</ClientOnly>
+  }
+
+  return (
+    <>
+      {contents}
+
+      {process.env.HANZO_GUI_TARGET !== 'native' && config && !disableInjectCSS && (
+        <style
+          // react 19 feature to hoist style tags to header:
+          // https://react.dev/reference/react-dom/components/style
+          // @ts-ignore
+          precedence="default"
+          href="gui-css"
+          key="gui-css"
+        >
+          {config.getCSS()}
+        </style>
+      )}
+    </>
+  )
+}

package/src/views/GuiRoot.native.tsx

@@ -0,0 +1,9 @@
+import type React from 'react'
+
+export function GuiRoot(props: {
+  children: React.ReactNode
+  trackMount?: boolean
+  style?: any
+}) {
+  return props.children
+}

package/src/views/GuiRoot.tsx

@@ -0,0 +1,64 @@
+import React from 'react'
+import { getConfig } from '../config'
+import { ThemeName } from '../types'
+import { Theme } from './Theme'
+
+let defaultFontClass = ''
+
+/**
+ * Applies default font class and CSS variable inheritance via display:contents.
+ * Used by GuiProvider at the root and by portals to re-establish font scope.
+ * Pass trackMount to also handle the t_unmounted class for CSS animation gating.
+ */
+export function GuiRoot({
+  children,
+  theme,
+  isRootRoot,
+  passThrough,
+  style,
+}: {
+  children: React.ReactNode
+  theme: ThemeName
+  isRootRoot?: boolean
+  passThrough?: boolean
+  style?: React.CSSProperties
+}) {
+  const [mounted, setMounted] = React.useState(!isRootRoot)
+
+  React.useEffect(() => {
+    if (!mounted) {
+      setMounted(true)
+    }
+  }, [])
+
+  // cache the font class name
+  if (!defaultFontClass) {
+    const config = getConfig()
+    const defaultFont = config.defaultFont
+    if (defaultFont) {
+      defaultFontClass = `font_${defaultFont}`
+    }
+  }
+
+  const contents = (
+    <span
+      style={style}
+      // font_body (or default font) sets all font properties via shared CSS rule
+      className={`_dsp_contents ${mounted ? '' : 't_unmounted'} ${defaultFontClass}`}
+    >
+      {children}
+    </span>
+  )
+
+  // at root, ThemeProvider already applied theme - skip re-wrapping
+  // for portals/modals, we re-thread the theme so each root gets the right className setup
+  if (isRootRoot) {
+    return contents
+  }
+
+  return (
+    <Theme passThrough={passThrough} contain forceClassName name={theme}>
+      {contents}
+    </Theme>
+  )
+}

package/src/views/Slot.tsx

@@ -0,0 +1,86 @@
+// via radix
+
+import { composeRefs } from '@hanzogui/compose-refs'
+import { isWeb } from '@hanzogui/constants'
+import type { ReactNode } from 'react'
+import { Children, cloneElement, forwardRef, isValidElement, memo } from 'react'
+import { mergeSlotStyleProps } from '../helpers/mergeSlotStyleProps'
+
+/* -------------------------------------------------------------------------------------------------
+ * Slot
+ * -----------------------------------------------------------------------------------------------*/
+
+interface SlotProps {
+  children: ReactNode
+}
+
+export const Slot = memo(
+  forwardRef<any, SlotProps>(function Slot(props, forwardedRef) {
+    const { children, ...slotProps } = props
+
+    if (isValidElement(children)) {
+      const mergedProps = mergeSlotProps(children, slotProps)
+      return cloneElement(
+        children,
+        children.type['avoidForwardRef']
+          ? mergedProps
+          : {
+              ...mergedProps,
+              ref: composeRefs(forwardedRef, (children as any).props.ref),
+            }
+      )
+    }
+
+    return Children.count(children) > 1 ? Children.only(null) : null
+  })
+)
+
+/* -------------------------------------------------------------------------------------------------
+ * Slottable
+ * -----------------------------------------------------------------------------------------------*/
+
+export const Slottable = ({ children }: { children: ReactNode }) => {
+  return <>{children}</>
+}
+
+Slottable['displayName'] = 'Slottable'
+
+/* ---------------------------------------------------------------------------------------------- */
+
+const pressMap = isWeb
+  ? {
+      onPress: 'onClick',
+      onPressOut: 'onMouseUp',
+      onPressIn: 'onMouseDown',
+    }
+  : {}
+
+function mergeSlotProps(child: any, slotProps: Record<string, any>) {
+  const childProps = child.props
+  const isHTMLChild = typeof child.type === 'string'
+
+  // convert RN press events to web events for HTML children
+  if (isHTMLChild) {
+    for (const key in pressMap) {
+      if (key in slotProps) {
+        slotProps[pressMap[key]] = slotProps[key]
+        delete slotProps[key]
+      }
+    }
+  }
+
+  // merge slot props with child props (child wins via overlay)
+  const merged = mergeSlotStyleProps(slotProps, childProps)
+
+  // convert child's RN press events to web events after merge
+  if (isHTMLChild) {
+    for (const key in pressMap) {
+      if (key in merged) {
+        merged[pressMap[key]] = merged[key]
+        delete merged[key]
+      }
+    }
+  }
+
+  return merged
+}

package/src/views/Text.tsx

@@ -0,0 +1,71 @@
+import { stylePropsTextOnly, validStyles } from '@hanzogui/helpers'
+
+import { createComponent } from '../createComponent'
+import type {
+  GuiTextElement,
+  TextNonStyleProps,
+  TextProps,
+  TextStylePropsBase,
+} from '../types'
+
+export type Text = GuiTextElement
+
+const ellipsisStyle =
+  process.env.HANZO_GUI_TARGET === 'web'
+    ? {
+        maxWidth: '100%',
+        overflow: 'hidden',
+        textOverflow: 'ellipsis',
+        whiteSpace: 'nowrap',
+      }
+    : {
+        numberOfLines: 1,
+        lineBreakMode: 'clip',
+      }
+
+export const Text = createComponent<
+  TextProps,
+  Text,
+  TextNonStyleProps,
+  TextStylePropsBase
+>({
+  componentName: 'Text',
+  acceptsClassName: true,
+  isText: true,
+
+  defaultProps:
+    process.env.HANZO_GUI_TARGET === 'web'
+      ? undefined
+      : {
+          suppressHighlighting: true,
+        },
+
+  inlineWhenUnflattened: new Set(['fontFamily']),
+
+  variants: {
+    ...(process.env.HANZO_GUI_TARGET === 'web' && {
+      numberOfLines: {
+        1: ellipsisStyle,
+
+        ':number': (numberOfLines) =>
+          numberOfLines >= 1
+            ? {
+                WebkitLineClamp: numberOfLines,
+                WebkitBoxOrient: 'vertical',
+                display: '-webkit-box',
+                overflow: 'hidden',
+              }
+            : null,
+      },
+    }),
+
+    ellipsis: {
+      true: ellipsisStyle,
+    },
+  },
+
+  validStyles: {
+    ...validStyles,
+    ...stylePropsTextOnly,
+  },
+})

package/src/views/Theme.tsx

@@ -0,0 +1,246 @@
+import { isWeb } from '@hanzogui/constants'
+import type { MutableRefObject } from 'react'
+import React, { Children, cloneElement, forwardRef, isValidElement, useRef } from 'react'
+import { getSetting } from '../config'
+import { variableToString } from '../createVariable'
+import { useThemeWithState } from '../hooks/useTheme'
+import {
+  getThemeState,
+  hasThemeUpdatingProps,
+  ThemeStateContext,
+} from '../hooks/useThemeState'
+import type { ThemeProps, ThemeState } from '../types'
+import { ThemeDebug } from './ThemeDebug'
+
+type ThemeComponentPropsOnly = ThemeProps & { passThrough?: boolean; contain?: boolean }
+
+export const Theme = forwardRef(function Theme(props: ThemeComponentPropsOnly, ref) {
+  'use no memo'
+
+  // @ts-expect-error only for internal views
+  if (props.disable) {
+    return props.children
+  }
+
+  const { passThrough } = props
+
+  const isRoot = !!props['_isRoot']
+
+  const [_, themeState] = useThemeWithState(props, isRoot)
+
+  const disableDirectChildTheme = props['disable-child-theme']
+
+  let finalChildren = disableDirectChildTheme
+    ? Children.map(props.children, (child) =>
+        passThrough || !isValidElement(child)
+          ? child
+          : cloneElement(child, { ['data-disable-theme']: true } as any)
+      )
+    : props.children
+
+  if (ref) {
+    try {
+      React.Children.only(finalChildren)
+      // TODO deprecate react 18 and then avoid clone here and just pass prop
+      finalChildren = cloneElement(finalChildren, { ref })
+    } catch {
+      //ok
+    }
+  }
+
+  const stateRef = useRef({
+    hasEverThemed: false,
+  })
+
+  return getThemedChildren(
+    themeState,
+    finalChildren,
+    props,
+    isRoot,
+    stateRef,
+    passThrough
+  )
+})
+
+Theme['avoidForwardRef'] = true
+
+export function getThemedChildren(
+  themeState: ThemeState,
+  children: any,
+  props: ThemeComponentPropsOnly,
+  isRoot = false,
+  stateRef: MutableRefObject<{ hasEverThemed?: boolean | 'wrapped' }>,
+  passThrough = false
+) {
+  const { shallow, forceClassName } = props
+
+  // always be true if ever themed so we avoid re-parenting
+  const state = stateRef.current
+  let hasEverThemed = state.hasEverThemed
+
+  let shouldRenderChildrenWithTheme =
+    hasEverThemed || themeState.isNew || isRoot || hasThemeUpdatingProps(props)
+
+  if (process.env.NODE_ENV === 'development' && props.debug === 'visualize') {
+    children = (
+      <ThemeDebug themeState={themeState} themeProps={props}>
+        {children}
+      </ThemeDebug>
+    )
+  }
+
+  if (!shouldRenderChildrenWithTheme) {
+    return children
+  }
+
+  // from here on out we have to be careful not to re-parent
+  children = (
+    <ThemeStateContext.Provider value={themeState.id}>
+      {children}
+    </ThemeStateContext.Provider>
+  )
+
+  const { isInverse, name } = themeState
+  const requiresExtraWrapper = isInverse || forceClassName
+
+  // it only ever progresses from false => true => 'wrapped'
+  if (!state.hasEverThemed) {
+    state.hasEverThemed = true
+  }
+  if (
+    requiresExtraWrapper ||
+    // if the theme is exactly dark or light, its likely to change between dark/light
+    // and that would require wrapping which would re-parent, so to avoid re-parenting do this
+    themeState.name === 'dark' ||
+    themeState.name === 'light'
+  ) {
+    state.hasEverThemed = 'wrapped'
+  }
+
+  // each children of these children wont get the theme
+  if (shallow) {
+    if (!themeState.parentId) {
+      // they are doing shallow but didnt change actually change a theme theme?
+    } else {
+      const parentState = getThemeState(
+        themeState.isNew ? themeState.id : themeState.parentId
+      )
+      if (!parentState) throw new Error(`‼️010`)
+      children = Children.toArray(children).map((child) => {
+        return isValidElement(child)
+          ? passThrough
+            ? child
+            : cloneElement(
+                child,
+                undefined,
+                <Theme name={parentState.name}>{(child as any).props.children}</Theme>
+              )
+          : child
+      })
+    }
+  }
+
+  if (process.env.NODE_ENV === 'development') {
+    if (!passThrough && props.debug) {
+      console.warn(` getThemedChildren`, {
+        requiresExtraWrapper,
+        forceClassName,
+        themeState,
+        state,
+        themeSpanProps: getThemeClassNameAndColor(themeState, props, isRoot),
+      })
+    }
+  }
+
+  // this has to be after a few of the above items so it properly sets context (even if shallow set)
+  if (forceClassName === false) {
+    return children
+  }
+
+  if (isWeb) {
+    const baseStyle = props.contain ? inertContainedStyle : inertStyle
+    const { className = '', color } = passThrough
+      ? {}
+      : getThemeClassNameAndColor(themeState, props, isRoot)
+
+    children = (
+      <span
+        className={`${className} is_Theme`}
+        style={passThrough ? baseStyle : { color, ...baseStyle }}
+      >
+        {children}
+      </span>
+    )
+
+    // to prevent tree structure changes always render this if inverse is true or false
+    if (state.hasEverThemed === 'wrapped') {
+      // but still calculate if we need the classnames
+      const className = requiresExtraWrapper
+        ? `${
+            name.startsWith('light') ? 't_light' : name.startsWith('dark') ? 't_dark' : ''
+          } _dsp_contents`
+        : `_dsp_contents`
+      children = <span className={className}>{children}</span>
+    }
+
+    return children
+  }
+
+  return children
+}
+
+const inertStyle = {
+  display: 'contents',
+}
+
+const inertContainedStyle = {
+  display: 'contents',
+  contain: 'strict',
+}
+
+const empty = { className: '', color: undefined }
+
+function getThemeClassNameAndColor(
+  themeState: ThemeState,
+  props: ThemeProps,
+  isRoot = false
+) {
+  if (!themeState.isNew && !props.forceClassName) {
+    return empty
+  }
+
+  // in order to provide currentColor, set color by default
+  const themeColor =
+    themeState?.theme && themeState.isNew ? variableToString(themeState.theme.color) : ''
+
+  const style = themeColor
+    ? {
+        color: themeColor,
+      }
+    : undefined
+
+  const themeClassName = themeState.name.replace(schemePrefix, '')
+
+  // Build full hierarchy of theme classes for CSS variable inheritance
+  // Examples:
+  // - "red_surface1" → "t_red t_red_surface1"
+  // - "green_active_Button" → "t_green t_green_active t_green_active_Button"
+  const themeNameParts = themeClassName.split('_')
+  let themeClasses = `t_${themeClassName}`
+
+  if (themeNameParts.length > 1) {
+    // Build full hierarchy for all multi-part themes (sub-themes, component themes, etc.)
+    // This enables CSS variable inheritance through all levels
+    const hierarchyClasses: string[] = []
+    for (let i = 1; i <= themeNameParts.length; i++) {
+      hierarchyClasses.push(`t_${themeNameParts.slice(0, i).join('_')}`)
+    }
+    themeClasses = hierarchyClasses.join(' ')
+  }
+
+  const className = `${isRoot ? '' : 't_sub_theme'} ${themeClasses}`
+
+  return { color: themeColor, className }
+}
+
+const schemePrefix = /^(dark|light)_/

package/src/views/ThemeDebug.native.tsx

@@ -0,0 +1,17 @@
+import type { ThemeProps, ThemeState } from '../types'
+
+export function ThemeDebug({
+  themeState,
+  themeProps,
+  children,
+}: {
+  themeState: ThemeState
+  themeProps: ThemeProps
+  children: any
+}) {
+  // empty
+
+  return children
+}
+
+ThemeDebug['displayName'] = 'ThemeDebug'