@hanzogui/native 2.0.0

package/src/burntState.ts

@@ -0,0 +1,28 @@
+import { createGlobalState } from './globalState'
+import type { BurntState } from './types'
+
+const state = createGlobalState<BurntState>(`burnt`, {
+  enabled: false,
+  toast: null,
+  dismissAllAlerts: null,
+})
+
+export interface BurntAccessor {
+  readonly isEnabled: boolean
+  readonly state: BurntState
+  set(newState: BurntState): void
+}
+
+export function getBurnt(): BurntAccessor {
+  return {
+    get isEnabled(): boolean {
+      return state.get().enabled
+    },
+    get state(): BurntState {
+      return state.get()
+    },
+    set(newState: BurntState): void {
+      state.set(newState)
+    },
+  }
+}

package/src/components.tsx

@@ -0,0 +1,48 @@
+import type { ReactNode } from 'react'
+import { getPortal } from './portalState'
+import type {
+  NativePortalProps,
+  NativePortalHostProps,
+  NativePortalProviderProps,
+} from './types'
+
+export type { NativePortalProps, NativePortalHostProps, NativePortalProviderProps }
+
+/**
+ * Renders children into a teleport Portal when available.
+ * Returns null when teleport is not set up (allows fallback handling by caller).
+ */
+export function NativePortal({
+  hostName = 'root',
+  children,
+}: NativePortalProps): ReactNode {
+  const state = getPortal().state
+  if (state.type !== 'teleport') return null
+
+  const { Portal } = (globalThis as any).__gui_teleport
+  return <Portal hostName={hostName}>{children}</Portal>
+}
+
+/**
+ * Renders a teleport PortalHost when available.
+ * Returns null when teleport is not set up.
+ */
+export function NativePortalHost({ name }: NativePortalHostProps): ReactNode {
+  const state = getPortal().state
+  if (state.type !== 'teleport') return null
+
+  const { PortalHost } = (globalThis as any).__gui_teleport
+  return <PortalHost name={name} />
+}
+
+/**
+ * Wraps children with teleport PortalProvider when available.
+ * Returns children as-is when teleport is not set up.
+ */
+export function NativePortalProvider({ children }: NativePortalProviderProps): ReactNode {
+  const state = getPortal().state
+  if (state.type !== 'teleport') return <>{children}</>
+
+  const { PortalProvider } = (globalThis as any).__gui_teleport
+  return <PortalProvider>{children}</PortalProvider>
+}

package/src/gestureState.ts

@@ -0,0 +1,91 @@
+import { createGlobalState } from './globalState'
+import type { GestureState } from './types'
+
+const state = createGlobalState<GestureState>(`gesture`, {
+  enabled: false,
+  Gesture: null,
+  GestureDetector: null,
+  ScrollView: null,
+})
+
+export interface Insets {
+  top?: number
+  left?: number
+  bottom?: number
+  right?: number
+}
+
+export type PressGestureConfig = {
+  onPressIn?: (e: any) => void
+  onPressOut?: (e: any) => void
+  onPress?: (e: any) => void
+  onLongPress?: (e: any) => void
+  delayLongPress?: number
+  hitSlop?: number | Insets | null
+}
+
+export interface GestureHandlerAccessor {
+  readonly isEnabled: boolean
+  readonly state: GestureState
+  set(updates: Partial<GestureState>): void
+  disable(): void
+  createPressGesture(config: PressGestureConfig): any
+}
+
+export function getGestureHandler(): GestureHandlerAccessor {
+  return {
+    get isEnabled(): boolean {
+      return state.get().enabled
+    },
+    get state(): GestureState {
+      return state.get()
+    },
+    set(updates: Partial<GestureState>): void {
+      Object.assign(state.get(), updates)
+    },
+
+    disable(): void {
+      state.get().enabled = false
+    },
+
+    createPressGesture(config: PressGestureConfig): any {
+      const { Gesture } = state.get()
+      if (!Gesture) return null
+
+      const longPressDuration = config.delayLongPress ?? 500
+
+      // Tap gesture for regular presses
+      // Use long maxDuration to not cancel during long presses
+      const tap = Gesture.Tap()
+        .runOnJS(true)
+        .maxDuration(10000) // allow very long presses
+        .onBegin((e: any) => {
+          config.onPressIn?.(e)
+        })
+        .onEnd((e: any) => {
+          config.onPress?.(e)
+        })
+        .onFinalize((e: any) => {
+          config.onPressOut?.(e)
+        })
+
+      if (config.hitSlop) tap.hitSlop(config.hitSlop)
+
+      // if no long press handler, just use tap
+      if (!config.onLongPress) return tap
+
+      // LongPress gesture for long press handling
+      const longPress = Gesture.LongPress()
+        .runOnJS(true)
+        .minDuration(longPressDuration)
+        .onBegin((e: any) => config.onPressIn?.(e))
+        .onStart((e: any) => config.onLongPress?.(e))
+        .onFinalize((e: any) => config.onPressOut?.(e))
+
+      if (config.hitSlop) longPress.hitSlop(config.hitSlop)
+
+      // exclusive: longPress has priority, tap is fallback for quick presses
+      return Gesture.Exclusive(longPress, tap)
+    },
+  }
+}

package/src/globalState.ts

@@ -0,0 +1,32 @@
+export function createGlobalState<T extends { enabled: boolean }>(
+  key: string,
+  defaultValue: T
+): {
+  get: () => T
+  set: (next: T) => void
+} {
+  const GLOBAL_KEY = `__gui_${key}__`
+
+  type GuiGlobal = typeof globalThis & {
+    [GLOBAL_KEY]?: T
+  }
+
+  function getGlobalState(): T {
+    const g = globalThis as GuiGlobal
+    if (!g[GLOBAL_KEY]) {
+      // reset on module load so reloadReactNative gets a clean state
+      // (globalThis persists across reloads but module scope re-evaluates)
+      g[GLOBAL_KEY] = defaultValue
+    }
+    return g[GLOBAL_KEY]!
+  }
+
+  function setGlobalState(newState: T): void {
+    ;(globalThis as GuiGlobal)[GLOBAL_KEY] = newState
+  }
+
+  return {
+    get: getGlobalState,
+    set: setGlobalState,
+  }
+}

package/src/index.ts

@@ -0,0 +1,77 @@
+/**
+ * @hanzogui/native
+ *
+ * Native setup modules for Gui. Import these at the top of your app entry point.
+ *
+ * @example
+ * ```tsx
+ * // In your app entry (index.js or App.tsx)
+ * import '@hanzogui/native/setup-teleport'
+ * import '@hanzogui/native/setup-gesture-handler'
+ * import '@hanzogui/native/setup-worklets'
+ * import '@hanzogui/native/setup-safe-area'
+ * import '@hanzogui/native/expo-linear-gradient'
+ * import '@hanzogui/native/setup-keyboard-controller'
+ *
+ * // Then use Hanzo GUI components normally
+ * // Sheet will automatically use native gestures when available
+ * // LinearGradient will use expo-linear-gradient when installed
+ * ```
+ */
+
+// types
+export type {
+  NativePortalState,
+  GestureState,
+  WorkletsState,
+  SafeAreaState,
+  SafeAreaInsets,
+  SafeAreaFrame,
+  SafeAreaMetrics,
+  LinearGradientState,
+  ZeegoState,
+  BurntState,
+  NativePortalProps,
+  NativePortalHostProps,
+  NativePortalProviderProps,
+} from './types'
+
+// portal
+export { getPortal } from './portalState'
+export type { PortalAccessor } from './portalState'
+
+// gesture handler
+export { getGestureHandler } from './gestureState'
+export type { GestureHandlerAccessor, PressGestureConfig } from './gestureState'
+
+// worklets
+export { getWorklets } from './workletsState'
+export type { WorkletsAccessor } from './workletsState'
+
+// safe area
+export { getSafeArea } from './safeAreaState'
+export type { SafeAreaAccessor } from './safeAreaState'
+
+// linear gradient
+export { getLinearGradient } from './linearGradientState'
+export type { LinearGradientAccessor } from './linearGradientState'
+
+// keyboard controller state exports (safe - no side effects)
+export {
+  isKeyboardControllerEnabled,
+  getKeyboardControllerState,
+  setKeyboardControllerState,
+} from './keyboardControllerState'
+export type { KeyboardControllerState } from './keyboardControllerState'
+
+// zeego (native menus)
+export { getZeego } from './zeegoState'
+export type { ZeegoAccessor } from './zeegoState'
+export { NativeMenuContext } from './nativeMenuContext'
+
+// burnt (native toasts)
+export { getBurnt } from './burntState'
+export type { BurntAccessor } from './burntState'
+
+// components
+export { NativePortal, NativePortalHost, NativePortalProvider } from './components'

package/src/keyboardControllerState.ts

@@ -0,0 +1,29 @@
+import { createGlobalState } from './globalState'
+import type { KeyboardControllerState } from './types'
+
+export type { KeyboardControllerState }
+
+const state = createGlobalState<KeyboardControllerState>(`keyboard_controller`, {
+  enabled: false,
+  KeyboardProvider: null,
+  KeyboardAwareScrollView: null,
+  useKeyboardHandler: null,
+  useReanimatedKeyboardAnimation: null,
+  KeyboardController: null,
+  KeyboardEvents: null,
+  KeyboardStickyView: null,
+})
+
+export function isKeyboardControllerEnabled(): boolean {
+  return state.get().enabled
+}
+
+export function getKeyboardControllerState(): KeyboardControllerState {
+  return state.get()
+}
+
+export function setKeyboardControllerState(
+  updates: Partial<KeyboardControllerState>
+): void {
+  Object.assign(state.get(), updates)
+}

package/src/linearGradientState.ts

@@ -0,0 +1,27 @@
+import { createGlobalState } from './globalState'
+import type { LinearGradientState } from './types'
+
+const state = createGlobalState<LinearGradientState>(`linear_gradient`, {
+  enabled: false,
+  Component: null,
+})
+
+export interface LinearGradientAccessor {
+  readonly isEnabled: boolean
+  readonly state: LinearGradientState
+  set(newState: LinearGradientState): void
+}
+
+export function getLinearGradient(): LinearGradientAccessor {
+  return {
+    get isEnabled(): boolean {
+      return state.get().enabled
+    },
+    get state(): LinearGradientState {
+      return state.get()
+    },
+    set(newState: LinearGradientState): void {
+      state.set(newState)
+    },
+  }
+}

package/src/nativeMenuContext.ts

@@ -0,0 +1,4 @@
+import type React from 'react'
+import { createContext } from 'react'
+
+export const NativeMenuContext: React.Context<boolean> = createContext(false)

package/src/portalState.ts

@@ -0,0 +1,27 @@
+import { createGlobalState } from './globalState'
+import type { NativePortalState } from './types'
+
+const state = createGlobalState<NativePortalState>(`portal`, {
+  enabled: false,
+  type: null,
+})
+
+export interface PortalAccessor {
+  readonly isEnabled: boolean
+  readonly state: NativePortalState
+  set(newState: NativePortalState): void
+}
+
+export function getPortal(): PortalAccessor {
+  return {
+    get isEnabled(): boolean {
+      return state.get().enabled
+    },
+    get state(): NativePortalState {
+      return state.get()
+    },
+    set(newState: NativePortalState): void {
+      state.set(newState)
+    },
+  }
+}

package/src/safeAreaState.ts

@@ -0,0 +1,50 @@
+import { createGlobalState } from './globalState'
+import type { SafeAreaState, SafeAreaInsets, SafeAreaFrame } from './types'
+
+const state = createGlobalState<SafeAreaState>(`safe_area`, {
+  enabled: false,
+  useSafeAreaInsets: null,
+  useSafeAreaFrame: null,
+  initialMetrics: null,
+})
+
+const defaultInsets: SafeAreaInsets = { top: 0, right: 0, bottom: 0, left: 0 }
+const defaultFrame: SafeAreaFrame = { x: 0, y: 0, width: 0, height: 0 }
+
+export interface SafeAreaAccessor {
+  readonly isEnabled: boolean
+  readonly state: SafeAreaState
+  set(updates: Partial<SafeAreaState>): void
+  /** Get initial insets (non-reactive, for style resolution) */
+  getInsets(): SafeAreaInsets
+  /** Get initial frame (non-reactive) */
+  getFrame(): SafeAreaFrame
+}
+
+export function getSafeArea(): SafeAreaAccessor {
+  return {
+    get isEnabled() {
+      return state.get().enabled
+    },
+    get state() {
+      return state.get()
+    },
+    set(updates: Partial<SafeAreaState>) {
+      Object.assign(state.get(), updates)
+    },
+    getInsets() {
+      const s = state.get()
+      if (!s.enabled || !s.initialMetrics) {
+        return defaultInsets
+      }
+      return s.initialMetrics.insets
+    },
+    getFrame() {
+      const s = state.get()
+      if (!s.enabled || !s.initialMetrics) {
+        return defaultFrame
+      }
+      return s.initialMetrics.frame
+    },
+  }
+}

package/src/setup-burnt.ts

@@ -0,0 +1,38 @@
+/**
+ * Setup burnt for Hanzo GUI native toasts.
+ *
+ * Simply import this module at the top of your app entry point:
+ *
+ * @example
+ * ```tsx
+ * import '@hanzogui/native/setup-burnt'
+ * ```
+ *
+ * This automatically detects and configures burnt for use with
+ * native Toast functionality.
+ */
+
+import { getBurnt } from './burntState'
+
+function setup(): void {
+  const g = globalThis as any
+  if (g.__gui_native_burnt_setup) return
+  g.__gui_native_burnt_setup = true
+
+  try {
+    const Burnt = require('burnt') as typeof import('burnt')
+
+    if (Burnt) {
+      getBurnt().set({
+        enabled: true,
+        toast: Burnt.toast,
+        dismissAllAlerts: Burnt.dismissAllAlerts,
+      })
+    }
+  } catch {
+    // burnt not installed
+  }
+}
+
+// run setup immediately on import
+setup()

package/src/setup-expo-linear-gradient.ts

@@ -0,0 +1,36 @@
+/**
+ * Setup expo-linear-gradient for Gui.
+ *
+ * Simply import this module at the top of your app entry point:
+ *
+ * @example
+ * ```tsx
+ * import '@hanzogui/native/setup-expo-linear-gradient'
+ * ```
+ *
+ * This automatically detects and configures expo-linear-gradient.
+ * If not installed, LinearGradient will log a warning on native.
+ */
+
+import { getLinearGradient } from './linearGradientState'
+
+function setup(): void {
+  const g = globalThis as any
+  if (g.__gui_native_linear_gradient_setup) return
+  g.__gui_native_linear_gradient_setup = true
+
+  try {
+    const expoLinearGradient = require('expo-linear-gradient')
+    if (expoLinearGradient?.LinearGradient) {
+      getLinearGradient().set({
+        enabled: true,
+        Component: expoLinearGradient.LinearGradient,
+      })
+    }
+  } catch {
+    // expo-linear-gradient not installed, will use CSS fallback
+  }
+}
+
+// run setup immediately on import
+setup()

package/src/setup-gesture-handler.ts

@@ -0,0 +1,51 @@
+/**
+ * Setup gesture handler for Hanzo GUI native components.
+ *
+ * Simply import this module at the top of your app entry point:
+ *
+ * @example
+ * ```tsx
+ * import '@hanzogui/native/setup-gesture-handler'
+ * ```
+ *
+ * This automatically detects and configures react-native-gesture-handler
+ * for use with Sheet and other gesture-aware components.
+ */
+
+import { getGestureHandler } from './gestureState'
+
+function setup() {
+  const g = globalThis as any
+  if (g.__gui_native_gesture_setup_complete) {
+    return
+  }
+  g.__gui_native_gesture_setup_complete = true
+
+  try {
+    // dynamically require RNGH - it should already be imported by the app
+    const rngh = require('react-native-gesture-handler')
+    const { Gesture, GestureDetector, ScrollView } = rngh
+
+    if (Gesture && GestureDetector) {
+      getGestureHandler().set({
+        enabled: true,
+        Gesture,
+        GestureDetector,
+        ScrollView: ScrollView || null,
+      })
+
+      // also set on the legacy key for backward compat with @hanzogui/sheet
+      g.__gui_sheet_gesture_state__ = {
+        enabled: true,
+        Gesture,
+        GestureDetector,
+        ScrollView: ScrollView || null,
+      }
+    }
+  } catch {
+    // RNGH not available, that's fine
+  }
+}
+
+// run setup immediately on import
+setup()

package/src/setup-keyboard-controller.ts

@@ -0,0 +1,60 @@
+/**
+ * Setup keyboard controller for Hanzo GUI native components.
+ *
+ * Simply import this module at the top of your app entry point:
+ *
+ * @example
+ * ```tsx
+ * import '@hanzogui/native/setup-keyboard-controller'
+ * ```
+ *
+ * This automatically detects and configures react-native-keyboard-controller
+ * for use with Sheet and other keyboard-aware components.
+ *
+ * When enabled, Sheet gains:
+ * - Frame-by-frame keyboard tracking (60/120 FPS)
+ * - Smooth gesture + keyboard handoff
+ * - Interactive keyboard dismiss on sheet drag
+ */
+
+import { setKeyboardControllerState } from './keyboardControllerState'
+
+function setup() {
+  const g = globalThis as any
+  if (g.__gui_native_keyboard_controller_setup_complete) {
+    return
+  }
+  g.__gui_native_keyboard_controller_setup_complete = true
+
+  try {
+    // dynamically require keyboard-controller - it should already be imported by the app
+    const rnkc = require('react-native-keyboard-controller')
+    const {
+      KeyboardProvider,
+      KeyboardAwareScrollView,
+      useKeyboardHandler,
+      useReanimatedKeyboardAnimation,
+      KeyboardController,
+      KeyboardEvents,
+      KeyboardStickyView,
+    } = rnkc
+
+    if (useKeyboardHandler && KeyboardProvider) {
+      setKeyboardControllerState({
+        enabled: true,
+        KeyboardProvider: KeyboardProvider || null,
+        KeyboardAwareScrollView: KeyboardAwareScrollView || null,
+        useKeyboardHandler: useKeyboardHandler || null,
+        useReanimatedKeyboardAnimation: useReanimatedKeyboardAnimation || null,
+        KeyboardController: KeyboardController || null,
+        KeyboardEvents: KeyboardEvents || null,
+        KeyboardStickyView: KeyboardStickyView || null,
+      })
+    }
+  } catch {
+    // keyboard-controller not available, that's fine
+  }
+}
+
+// run setup immediately on import
+setup()

package/src/setup-keyboard-controller.web.ts

@@ -0,0 +1,6 @@
+/**
+ * Web stub for keyboard controller setup.
+ * No-op on web - keyboard-controller is native-only.
+ */
+
+// intentionally empty - web doesn't need keyboard-controller

package/src/setup-safe-area.ts

@@ -0,0 +1,56 @@
+/**
+ * Setup react-native-safe-area-context for Hanzo GUI native components.
+ *
+ * Simply import this module at the top of your app entry point:
+ *
+ * @example
+ * ```tsx
+ * import '@hanzogui/native/setup-safe-area'
+ * ```
+ *
+ * This automatically detects and configures react-native-safe-area-context
+ * for use with Hanzo GUI components that need safe area awareness.
+ *
+ * Note: You must still wrap your app with SafeAreaProvider yourself:
+ * ```tsx
+ * import { SafeAreaProvider } from 'react-native-safe-area-context'
+ * <SafeAreaProvider>
+ *   <App />
+ * </SafeAreaProvider>
+ * ```
+ *
+ * On web, this is a no-op since CSS env(safe-area-inset-*) values work natively.
+ */
+
+import { getSafeArea } from './safeAreaState'
+
+function setup() {
+  // only run on native
+  if (process.env.HANZO_GUI_TARGET !== 'native') {
+    return
+  }
+
+  const g = globalThis as any
+  if (g.__gui_native_safe_area_setup_complete) {
+    return
+  }
+  g.__gui_native_safe_area_setup_complete = true
+
+  try {
+    const safeAreaContext = require('react-native-safe-area-context')
+    const { useSafeAreaInsets, useSafeAreaFrame, initialWindowMetrics } = safeAreaContext
+
+    if (useSafeAreaInsets) {
+      getSafeArea().set({
+        enabled: true,
+        useSafeAreaInsets,
+        useSafeAreaFrame: useSafeAreaFrame || null,
+        initialMetrics: initialWindowMetrics || null,
+      })
+    }
+  } catch {
+    // react-native-safe-area-context not available
+  }
+}
+
+setup()