@hanzogui/web 2.0.0

package/src/types.tsx

@@ -0,0 +1,3364 @@
+import type { StyleObject } from '@hanzogui/helpers'
+import type { Properties } from 'csstype'
+import type {
+  CSSProperties,
+  ComponentType,
+  Context,
+  ForwardRefExoticComponent,
+  ForwardRefRenderFunction,
+  FunctionComponent,
+  HTMLAttributes,
+  ProviderExoticComponent,
+  ReactNode,
+  RefAttributes,
+  RefObject,
+} from 'react'
+import type {
+  PressableProps,
+  Text as RNText,
+  TextStyle as RNTextStyle,
+  TextProps as ReactTextProps,
+  View,
+  ViewProps,
+  ViewStyle,
+} from 'react-native'
+
+import type { CSSColorNames } from './interfaces/CSSColorNames'
+import type { RNOnlyProps } from './interfaces/RNExclusiveTypes'
+
+export type SizeKeys =
+  | 'width'
+  | 'height'
+  | 'minWidth'
+  | 'minHeight'
+  | 'maxWidth'
+  | 'maxHeight'
+  | 'shadowRadius'
+
+export type ColorKeys =
+  | 'color'
+  | 'backgroundColor'
+  | 'borderColor'
+  | 'borderBottomColor'
+  | 'borderTopColor'
+  | 'borderLeftColor'
+  | 'borderRightColor'
+  | 'shadowColor'
+  | 'outlineColor'
+  | 'textShadowColor'
+  | 'borderBlockColor'
+  | 'borderBlockEndColor'
+  | 'borderBlockStartColor'
+  | 'borderInlineColor'
+  | 'borderInlineStartColor'
+  | 'borderInlineEndColor'
+
+export type SpaceKeys =
+  | 'space'
+  | 'padding'
+  | 'paddingHorizontal'
+  | 'paddingVertical'
+  | 'paddingLeft'
+  | 'paddingTop'
+  | 'paddingBottom'
+  | 'paddingLeft'
+  | 'paddingRight'
+  | 'paddingEnd'
+  | 'paddingStart'
+  | 'margin'
+  | 'marginHorizontal'
+  | 'marginVertical'
+  | 'marginLeft'
+  | 'marginTop'
+  | 'marginBottom'
+  | 'marginLeft'
+  | 'marginRight'
+  | 'marginEnd'
+  | 'marginStart'
+  | 'marginBlock'
+  | 'marginBlockStart'
+  | 'marginBlockEnd'
+  | 'marginInline'
+  | 'marginInlineStart'
+  | 'marginInlineEnd'
+  | 'paddingBlock'
+  | 'paddingBlockStart'
+  | 'paddingBlockEnd'
+  | 'paddingInline'
+  | 'paddingInlineStart'
+  | 'paddingInlineEnd'
+  | 'x'
+  | 'y'
+  | 'gap'
+  | 'rowGap'
+  | 'columnGap'
+  | 'scale'
+  | 'scaleX'
+  | 'scaleY'
+  | 'borderTopEndRadius'
+  | 'borderTopLeftRadius'
+  | 'borderTopRightRadius'
+  | 'borderTopStartRadius'
+  | 'borderBottomEndRadius'
+  | 'borderBottomLeftRadius'
+  | 'borderBottomRightRadius'
+  | 'borderBottomStartRadius'
+  | 'borderBottomWidth'
+  | 'borderLeftWidth'
+  | 'borderRadius'
+  | 'borderRightWidth'
+  | 'borderTopEndRadius'
+  | 'borderTopLeftRadius'
+  | 'borderTopRightRadius'
+  | 'borderEndWidth'
+  | 'borderStartWidth'
+  | 'borderTopStartRadius'
+  | 'borderTopWidth'
+  | 'borderWidth'
+  | 'left'
+  | 'top'
+  | 'right'
+  | 'bottom'
+  | 'shadowOffset'
+  | 'borderBlockWidth'
+  | 'borderBlockStartWidth'
+  | 'borderBlockEndWidth'
+  | 'borderInlineWidth'
+  | 'borderInlineStartWidth'
+  | 'borderInlineEndWidth'
+
+export type StyledContext<Props extends Record<string, any> = any> = Context<Props> & {
+  context: Context<Props>
+  props: Record<string, any> | undefined
+  Provider: ProviderExoticComponent<
+    Partial<Props | undefined> & {
+      children?: ReactNode
+      scope?: string
+    }
+  >
+
+  useStyledContext: (scope?: string) => Props
+}
+
+export type GuiComponentState = {
+  unmounted: boolean | 'should-enter'
+  disabled?: boolean
+  hover?: boolean
+  press?: boolean
+  pressIn?: boolean
+  focus?: boolean
+  focusVisible?: boolean
+  focusWithin?: boolean
+  transition?: null | {
+    style?: any
+    avoidClasses?: boolean
+  }
+
+  // this is used by the component itself to figure out group styles:
+  group?: Record<string, ChildGroupState>
+  hasDynGroupChildren?: boolean
+}
+
+// from react-native Accessibility.d.ts
+
+export type Role =
+  | 'alert'
+  | 'alertdialog'
+  | 'application'
+  | 'article'
+  | 'banner'
+  | 'button'
+  | 'cell'
+  | 'checkbox'
+  | 'columnheader'
+  | 'combobox'
+  | 'complementary'
+  | 'contentinfo'
+  | 'definition'
+  | 'dialog'
+  | 'directory'
+  | 'document'
+  | 'feed'
+  | 'figure'
+  | 'form'
+  | 'grid'
+  | 'group'
+  | 'heading'
+  | 'img'
+  | 'link'
+  | 'list'
+  | 'listitem'
+  | 'log'
+  | 'main'
+  | 'marquee'
+  | 'math'
+  | 'menu'
+  | 'menubar'
+  | 'menuitem'
+  | 'meter'
+  | 'navigation'
+  | 'none'
+  | 'note'
+  | 'option'
+  | 'presentation'
+  | 'progressbar'
+  | 'radio'
+  | 'radiogroup'
+  | 'region'
+  | 'row'
+  | 'rowgroup'
+  | 'rowheader'
+  | 'scrollbar'
+  | 'searchbox'
+  | 'separator'
+  | 'slider'
+  | 'spinbutton'
+  | 'status'
+  | 'summary'
+  | 'switch'
+  | 'tab'
+  | 'table'
+  | 'tablist'
+  | 'tabpanel'
+  | 'term'
+  | 'timer'
+  | 'toolbar'
+  | 'tooltip'
+  | 'tree'
+  | 'treegrid'
+  | 'treeitem'
+
+export type GuiComponentPropsBaseBase = {
+  target?: string
+
+  htmlFor?: string
+
+  /**
+   * When truthy passes through all props to a single child element, and avoids rendering its own element.
+   * Must pass just one child React element that will receive all the props.
+   *
+   * The option "except-style" will avoid passing any style related props.
+   *
+   * The option "web" will map all React Native style props to web props (onPress becomes onClick).
+   *
+   * The option "except-style-web" combines the except-style and web options.
+   *
+   */
+  asChild?: boolean | 'except-style' | 'except-style-web' | 'web'
+
+  dangerouslySetInnerHTML?: { __html: string }
+  children?: any | any[]
+
+  debug?: DebugProp
+
+  disabled?: boolean
+
+  /**
+   * Same as the web className property, useful for applying styles from CSS on web only
+   */
+  className?: string
+
+  /**
+   * If given a theme it will only apply to this element, instead of passing down to children
+   */
+  themeShallow?: boolean
+
+  /**
+   * If true, component themes will not be applied
+   */
+  unstyled?: boolean
+
+  /**
+   * Same as the web id property for setting a uid on an element
+   */
+  id?: string
+
+  /**
+   * Controls the rendered element on web.
+   * - String: renders as that HTML element (e.g., `render="button"`)
+   * - JSX Element: clones element with merged props (e.g., `render={<a href="/" />}`)
+   * - Function: full control with props and state (e.g., `render={(props) => <Custom {...props} />}`)
+   * @example render="button"
+   * @example render={<a href="/" />}
+   * @example render={(props, state) => <MyComponent {...props} isPressed={state.press} />}
+   */
+  render?:
+    | keyof HTMLElementTagNameMap
+    | (string & {})
+    | React.ReactElement
+    | ((
+        props: Record<string, any> & { ref?: React.Ref<any> },
+        state: GuiComponentState
+      ) => React.ReactElement)
+
+  /**
+   * Applies a theme to this element
+   */
+  theme?: ThemeName | null
+
+  /**
+   * Marks this component as a group for use in styling children based on parents named group
+   * See: https://gui.hanzo.ai/docs/intro/props
+   */
+  group?: GroupNames | boolean
+
+  /**
+   * Works only alongside group, when children of the group are using container based sizing on native you can hide them until parent is measured.
+   * See: https://gui.hanzo.ai/docs/intro/props
+   */
+  untilMeasured?: 'hide' | 'show'
+
+  /**
+   * Equivalent to "name" property on styled() for automatically applying a theme
+   */
+  componentName?: string
+
+  /**
+   * Used for controlling the order of focus with keyboard or assistive device enavigation
+   * See https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex
+   */
+  tabIndex?: string | number
+
+  /**
+   * Equivalent to role="" attribute on web for accessibility
+   */
+  role?: Role
+
+  /**
+   * Disable all compiler optimization
+   */
+  disableOptimization?: boolean
+
+  /**
+   * Forces the pseudo style state to be on
+   */
+  forceStyle?: 'hover' | 'press' | 'focus' | 'focusVisible' | 'focusWithin'
+
+  /**
+   * Disables className output of styles, instead using only inline styles
+   */
+  disableClassName?: boolean
+
+  /**
+   * Adds some area outside the typical bounds of the component for touch actions to register.
+   * Hanzo GUI uses Pressable internally so it supports `number | Insets` rather than just `Insets`
+   */
+  hitSlop?: number | Insets | null
+
+  /**
+   * Select which animation driver to use for this component.
+   * Pass a string key matching a driver registered in the `animations` config.
+   * Example: `<View animatedBy="spring">` when config has `animations: { default: css, spring: moti }`
+   */
+  animatedBy?: AnimationDriverKeys | null
+}
+
+export interface Insets {
+  top?: number
+  left?: number
+  bottom?: number
+  right?: number
+}
+
+export interface WebOnlyPressEvents {
+  onPress?: PressableProps['onPress']
+  onLongPress?: PressableProps['onLongPress']
+  onPressIn?: PressableProps['onPress']
+  onPressOut?: PressableProps['onPress']
+  onMouseEnter?: DivAttributes['onMouseEnter']
+  onMouseLeave?: DivAttributes['onMouseLeave']
+  onMouseDown?: DivAttributes['onMouseDown']
+  onMouseUp?: DivAttributes['onMouseUp']
+  onMouseMove?: DivAttributes['onMouseMove']
+  onMouseOver?: DivAttributes['onMouseOver']
+  onMouseOut?: DivAttributes['onMouseOut']
+  onFocus?: DivAttributes['onFocus']
+  onBlur?: DivAttributes['onBlur']
+  onClick?: DivAttributes['onClick']
+  onDoubleClick?: DivAttributes['onDoubleClick']
+  onContextMenu?: DivAttributes['onContextMenu']
+  onWheel?: DivAttributes['onWheel']
+
+  // Keyboard events
+  onKeyDown?: DivAttributes['onKeyDown']
+  onKeyUp?: DivAttributes['onKeyUp']
+
+  // Input/Change events
+  onChange?: DivAttributes['onChange']
+  onInput?: DivAttributes['onInput']
+  onBeforeInput?: DivAttributes['onBeforeInput']
+
+  // Scroll
+  onScroll?: DivAttributes['onScroll']
+
+  // Clipboard
+  onCopy?: DivAttributes['onCopy']
+  onCut?: DivAttributes['onCut']
+  onPaste?: DivAttributes['onPaste']
+
+  // Drag and drop
+  onDrag?: DivAttributes['onDrag']
+  onDragStart?: DivAttributes['onDragStart']
+  onDragEnd?: DivAttributes['onDragEnd']
+  onDragEnter?: DivAttributes['onDragEnter']
+  onDragLeave?: DivAttributes['onDragLeave']
+  onDragOver?: DivAttributes['onDragOver']
+  onDrop?: DivAttributes['onDrop']
+
+  // Pointer events
+  onPointerDown?: DivAttributes['onPointerDown']
+  onPointerMove?: DivAttributes['onPointerMove']
+  onPointerUp?: DivAttributes['onPointerUp']
+  onPointerCancel?: DivAttributes['onPointerCancel']
+}
+
+export type { MediaStyleObject, StyleObject } from '@hanzogui/helpers'
+
+type FontFamilies = FontTokens extends `$${infer Token}` ? Token : never
+
+export type LanguageContextType = Partial<{
+  [key in FontFamilies]: FontLanguages | 'default'
+}>
+
+export type FontLanguageProps = LanguageContextType & {
+  children?: React.ReactNode
+}
+
+export type ThemeProviderProps = {
+  className?: string
+  defaultTheme: string | null | undefined
+  /** @deprecated moved to createGui({ settings: { disableRootThemeClass } }) */
+  disableRootThemeClass?: boolean
+  /** @deprecated moved to createGui({ settings: { themeClassNameOnRoot } }) */
+  themeClassNameOnRoot?: boolean
+  children?: any
+  reset?: boolean
+}
+
+export type ThemeState = {
+  id: string
+  name: string
+  theme: ThemeParsed
+  parentName?: string
+  isInverse?: boolean
+  isNew?: boolean
+  parentId?: string
+  scheme?: 'light' | 'dark'
+}
+
+export interface Variable<A = any> {
+  isVar: true
+  variable?: string
+  val: A
+  name: string
+  key: string
+  needsPx?: boolean // Flag to indicate this token should get px units
+}
+
+export type MakeVariable<A = any> = A extends string | number ? Variable<A> : A
+
+/**
+ * Type for the px helper object that indicates a token value needs px units
+ */
+export interface PxValue {
+  val: number
+  needsPx: true
+}
+
+export type ColorScheme = 'light' | 'dark'
+
+export type IsMediaType = boolean | 'platform' | 'theme' | 'group'
+
+export type MaybeGuiComponent<A = any> = GuiComponent<A> | React.FC<A>
+
+type MeasureOnSuccessCallback = (
+  x: number,
+  y: number,
+  width: number,
+  height: number,
+  pageX: number,
+  pageY: number
+) => void
+
+type MeasureInWindowOnSuccessCallback = (
+  x: number,
+  y: number,
+  width: number,
+  height: number
+) => void
+
+type MeasureLayoutOnSuccessCallback = (
+  left: number,
+  top: number,
+  width: number,
+  height: number
+) => void
+
+/**
+ * Methods added to element refs that work across web and native.
+ * On web these are added at runtime to HTMLElements.
+ * On native these exist on View already.
+ */
+export interface GuiElementMethods {
+  measure(callback: MeasureOnSuccessCallback): void
+  measureInWindow(callback: MeasureInWindowOnSuccessCallback): void
+  measureLayout(
+    relativeToNativeNode: View | HTMLElement,
+    onSuccess: MeasureLayoutOnSuccessCallback,
+    onFail?: () => void
+  ): void
+  focus(): void
+  blur(): void
+}
+
+/**
+ * Cross-platform element ref type. On web, includes GuiElementMethods
+ * (measure, focus, blur) which Hanzo GUI adds at runtime. On native, View
+ * already has these via NativeMethods.
+ */
+export type GuiElement = (HTMLElement & GuiElementMethods) | View
+export type GuiTextElement = (HTMLElement & GuiElementMethods) | RNText
+
+/**
+ * Web-specific element type for platform-specific .tsx files.
+ * Use when you need HTMLElement subtype properties (e.g., selectionStart on HTMLInputElement)
+ * that aren't on the cross-platform GuiElement type.
+ *
+ * @example
+ * const ref = useRef<GuiWebElement<HTMLInputElement>>(null)
+ * // ref.current has both HTMLInputElement props and GuiElementMethods
+ */
+export type GuiWebElement<T extends HTMLElement = HTMLElement> = T &
+  GuiElementMethods
+
+export type DebugProp = boolean | 'break' | 'verbose' | 'visualize' | 'profile'
+
+export interface GuiComponentPropsBase
+  extends GuiComponentPropsBaseBase, WebOnlyPressEvents {}
+
+/**
+ * For static / studio
+ */
+
+type NameToPaths = {
+  [key: string]: Set<string>
+}
+
+export type LoadedComponents = {
+  moduleName: string
+  nameToInfo: Record<
+    string,
+    {
+      staticConfig: StaticConfig
+    }
+  >
+}
+
+export type GuiProjectInfo = {
+  components: LoadedComponents[]
+  guiConfig: GuiInternalConfig
+  nameToPaths: NameToPaths
+}
+
+// base props that are accepted by createComponent (additional to react-native-web)
+
+export type DivAttributes = HTMLAttributes<HTMLDivElement>
+
+export type ReactComponentWithRef<Props, Ref> = ForwardRefExoticComponent<
+  Props & RefAttributes<Ref>
+>
+
+// needs to be cb style for subscribeToContextGroup to be able to poke through to last state
+export type ComponentSetStateShallow = React.Dispatch<
+  React.SetStateAction<Partial<GuiComponentState>>
+>
+
+export type ComponentContextI = {
+  disableSSR?: boolean
+  inText: boolean
+  language: LanguageContextType | null
+  animationDriver: AnimationDriver | null
+  setParentFocusState: ComponentSetStateShallow | null
+  mediaEmit?: (state: UseMediaState) => void
+  mediaEmitListeners?: Set<(state: UseMediaState) => void>
+  insets?: { top: number; right: number; bottom: number; left: number } | null
+}
+
+export type GuiComponentStateRef = {
+  startedUnhydrated: boolean
+
+  host?: GuiElement
+  composedRef?: (x: GuiElement) => void
+  willHydrate?: boolean
+  hasMeasured?: boolean
+  hasAnimated?: boolean
+  themeShallow?: boolean
+  hasEverThemed?: boolean | 'wrapped'
+  hasEverResetPresence?: boolean
+  hasHadEvents?: boolean
+  isListeningToTheme?: boolean
+  unPress?: Function
+  setStateShallow?: ComponentSetStateShallow
+  useStyleListener?: UseStyleListener
+  updateStyleListener?: () => void
+
+  // this is only used by group="" components
+  // sets up a context object to track current state + emit
+  group?: ComponentGroupEmitter
+
+  // avoid re-render animation support
+  nextState?: GuiComponentState
+  nextMedia?: UseMediaState
+
+  // cleanup function for media emit listener
+  mediaEmitCleanup?: () => void
+
+  // previous pseudo state for detecting enter vs exit transitions
+  prevPseudoState?: {
+    hover?: boolean
+    press?: boolean
+    focus?: boolean
+    groups?: Record<string, { hover?: boolean; press?: boolean; focus?: boolean }>
+  }
+}
+
+export type ComponentGroupEmitter = {
+  listeners: Set<GroupStateListener>
+  emit: GroupStateListener
+  subscribe: (cb: GroupStateListener) => () => void
+}
+
+export type WidthHeight = {
+  width: number
+  height: number
+}
+
+export type ChildGroupState = {
+  pseudo?: PseudoGroupState
+  media?: Record<MediaQueryKey extends number ? never : MediaQueryKey, boolean>
+}
+
+export type ComponentGroupState = {
+  pseudo?: PseudoGroupState
+  layout?: WidthHeight
+}
+
+export type GroupStateListener = (state: ComponentGroupState) => void
+
+export type SingleGroupContext = {
+  subscribe: (cb: GroupStateListener) => DisposeFn
+  state: ComponentGroupState
+}
+
+export type AllGroupContexts = {
+  [GroupName: string]: SingleGroupContext
+}
+
+export type PseudoGroupState = Pick<
+  GuiComponentState,
+  'disabled' | 'hover' | 'press' | 'pressIn' | 'focus' | 'focusVisible' | 'focusWithin'
+>
+
+export type LayoutEvent = {
+  nativeEvent: {
+    layout: LayoutValue
+    target: any
+  }
+  timeStamp: number
+}
+
+type LayoutValue = {
+  x: number
+  y: number
+  width: number
+  height: number
+  left: number
+  top: number
+}
+
+export type DisposeFn = () => void
+
+export type ConfigListener = (conf: GuiInternalConfig) => void
+
+// to prevent things from going circular, hoisting some types in this file
+// to generally order them as building up towards GuiConfig
+
+export type VariableVal = number | string | Variable | VariableValGeneric | PxValue
+export type VariableColorVal = string | Variable
+
+type GenericKey = string
+
+export type CreateTokens<Val extends VariableVal = VariableVal> = Record<
+  string,
+  { [key: GenericKey]: Val }
+> & {
+  color?: { [key: GenericKey]: Val }
+  space?: { [key: GenericKey]: Val }
+  size?: { [key: GenericKey]: Val }
+  radius?: { [key: GenericKey]: Val }
+  zIndex?: { [key: GenericKey]: Val }
+}
+
+export type TokenCategories = 'color' | 'space' | 'size' | 'radius' | 'zIndex'
+
+type Tokenify<A extends GenericTokens> = Omit<
+  {
+    [Key in keyof A]: TokenifyRecord<A[Key]>
+  },
+  TokenCategories
+> & {
+  color: TokenifyRecord<A extends { color: any } ? A['color'] : {}>
+  space: TokenifyRecord<A extends { space: any } ? A['space'] : {}>
+  size: TokenifyRecord<A extends { size: any } ? A['size'] : {}>
+  radius: TokenifyRecord<A extends { radius: any } ? A['radius'] : {}>
+  zIndex: TokenifyRecord<A extends { zIndex: any } ? A['zIndex'] : {}>
+}
+
+type TokenifyRecord<A extends object> = {
+  [Key in keyof A]: CoerceToVariable<A[Key]>
+}
+
+type CoerceToVariable<A> = A extends Variable ? A : Variable<A>
+
+export type GuiBaseTheme = {
+  // defined for our hanzo-gui kit , we could do this inside `gui`
+  // but maybe helpful to have some sort of universally shared things +
+  // + enforce if they want their own, redefine in their design sys
+  background: VariableColorVal
+  backgroundHover: VariableColorVal
+  backgroundPress: VariableColorVal
+  backgroundFocus: VariableColorVal
+  color: VariableColorVal
+  colorHover: VariableColorVal
+  colorPress: VariableColorVal
+  colorFocus: VariableColorVal
+  borderColor: VariableColorVal
+  borderColorHover: VariableColorVal
+  borderColorPress: VariableColorVal
+  borderColorFocus: VariableColorVal
+  shadowColor: VariableColorVal
+  shadowColorHover: VariableColorVal
+  shadowColorPress: VariableColorVal
+  shadowColorFocus: VariableColorVal
+}
+
+export type VariableValGeneric = { __generic: 1 }
+
+type GenericTokens = CreateTokens
+type GenericThemes = {
+  [key: string]: Partial<GuiBaseTheme> & {
+    [key: string]: VariableVal
+  }
+}
+
+export type CreateShorthands = {
+  // for some reason using keyof ViewStyle here will cause type circularity on react native 0.71
+  [key: string]: string
+}
+
+export type GenericShorthands = {}
+
+// sm: { minWidth: 100 }
+type GenericMedia = {
+  [key: string]: {
+    [key: string]: number | string
+  }
+}
+
+export type GenericFonts = Record<string, GenericFont>
+
+type GenericAnimations = {
+  [key: string]:
+    | string
+    | {
+        [key: string]: any
+      }
+    | any[]
+}
+
+// this is the "main" typed object, which users re-define
+// (internal) keep all types directly on this object and reference them from elsewhere
+//
+// const config = createGui(...)
+// type MyConfig = typeof config
+// declare module '@hanzo/gui' {
+//   export interface GuiCustomConfig extends MyConfig {}
+// }
+// now your whole app/kit should be typed correctly
+//
+export interface GuiCustomConfig {}
+
+export interface GuiConfig
+  extends Omit<GenericGuiConfig, keyof GuiCustomConfig>, GuiCustomConfig {}
+
+export type OnlyAllowShorthandsSetting = GuiConfig['settings'] extends {
+  onlyAllowShorthands: infer X
+}
+  ? X
+  : false
+
+export type OnlyShorthandStylePropsSetting = GuiConfig['settings'] extends {
+  onlyShorthandStyleProps: infer X
+}
+  ? X
+  : false
+
+export type CreateGuiConfig<
+  A extends GenericTokens,
+  B extends GenericThemes,
+  C extends GenericShorthands = GenericShorthands,
+  D extends GenericMedia = GenericMedia,
+  E extends GenericAnimations = GenericAnimations,
+  F extends GenericFonts = GenericFonts,
+  H extends GenericGuiSettings = GenericGuiSettings,
+  // preserve the raw animation driver keys ('default' | 'css' | etc)
+  // defaults to string so generic GuiInternalConfig accepts any driver keys
+  AnimDriverKeys extends string = string,
+> = {
+  fonts: RemoveLanguagePostfixes<F>
+  fontLanguages: GetLanguagePostfixes<F> extends never
+    ? string[]
+    : GetLanguagePostfixes<F>[]
+  tokens: A
+  // parsed
+  themes: {
+    [Name in keyof B]: {
+      [Key in keyof B[Name]]: CoerceToVariable<B[Name][Key]>
+    }
+  }
+  shorthands: C
+  media: D
+  // Support both single driver and multi-driver config
+  // Multi-driver: { default: cssDriver, spring: motiDriver }
+  // Single: AnimationDriver<E>
+  animations: AnimationDriver<E> | AnimationsConfigObject
+  // phantom type for preserving driver keys - never set at runtime, only for type inference
+  animationDriverKeys?: AnimDriverKeys
+  settings: H
+}
+
+type GetLanguagePostfix<Set> = Set extends string
+  ? Set extends `${string}_${infer Postfix}`
+    ? Postfix
+    : never
+  : never
+
+type OmitLanguagePostfix<Set> = Set extends string
+  ? Set extends `${infer Prefix}_${string}`
+    ? Prefix
+    : Set
+  : never
+
+type RemoveLanguagePostfixes<F extends GenericFonts> = {
+  [Key in OmitLanguagePostfix<keyof F>]: F[Key]
+}
+
+type GetLanguagePostfixes<F extends GenericFonts> = GetLanguagePostfix<keyof F>
+
+// test RemoveLanguagePostfixes
+// type x = CreateGuiConfig<any, any, any, any, any, {
+//   body: any,
+//   body_en: any
+// }>['fonts']
+
+type ConfProps<A, B, C, D, E, F, I> = {
+  tokens?: A
+  themes?: B
+  shorthands?: C
+  media?: D
+  animations?: E
+  fonts?: F
+  settings?: I
+}
+
+type EmptyTokens = {
+  color: {}
+  space: {}
+  size: {}
+  radius: {}
+  zIndex: {}
+}
+type EmptyThemes = {}
+type EmptyShorthands = {}
+type EmptyMedia = {}
+type EmptyAnimations = {}
+type EmptyFonts = {}
+
+type EmptyGuiSettings = {
+  allowedStyleValues: false
+  autocompleteSpecificTokens: 'except-special'
+}
+
+// Helper to extract animation config from AnimationDriver<Config> or multi-driver object
+type ExtractAnimationConfig<E> =
+  E extends AnimationDriver<infer Config>
+    ? Config
+    : E extends { default: AnimationDriver<infer Config> }
+      ? Config
+      : E extends GenericAnimations
+        ? E
+        : EmptyAnimations
+
+// Helper to extract animation driver keys from raw animations prop
+// Single driver: returns 'default'
+// Multi-driver { default: x, css: y }: returns 'default' | 'css'
+type ExtractAnimationDriverKeys<E> =
+  E extends AnimationDriver<any>
+    ? 'default'
+    : E extends { default: AnimationDriver<any> }
+      ? Extract<keyof E, string>
+      : 'default'
+
+export type InferGuiConfig<Conf> =
+  Conf extends ConfProps<infer A, infer B, infer C, infer D, infer E, infer F, infer H>
+    ? GuiInternalConfig<
+        A extends GenericTokens ? A : EmptyTokens,
+        B extends GenericThemes ? B : EmptyThemes,
+        C extends GenericShorthands ? C : EmptyShorthands,
+        D extends GenericMedia ? D : EmptyMedia,
+        ExtractAnimationConfig<E>,
+        F extends GenericFonts ? F : EmptyFonts,
+        H extends GenericGuiSettings ? H : EmptyGuiSettings,
+        ExtractAnimationDriverKeys<E>
+      >
+    : unknown
+
+// for use in creation functions so it doesnt get overwritten
+export type GenericGuiConfig = CreateGuiConfig<
+  GenericTokens,
+  GenericThemes,
+  GenericShorthands,
+  GenericMedia,
+  GenericAnimations,
+  GenericFonts
+>
+
+// try and find the top level types as they can be supersets:
+type NonSubThemeNames<A extends string | number> = A extends `${string}_${string}`
+  ? never
+  : A
+type BaseThemeDefinitions = GuiConfig['themes'][NonSubThemeNames<
+  keyof GuiConfig['themes']
+>]
+type GenericThemeDefinition = GuiConfig['themes'][keyof GuiConfig['themes']]
+export type ThemeDefinition = BaseThemeDefinitions extends never
+  ? GenericThemeDefinition
+  : BaseThemeDefinitions
+export type ThemeKeys = keyof ThemeDefinition
+export type ThemeParsed = {
+  [key in ThemeKeys]: CoerceToVariable<ThemeDefinition[key]>
+}
+
+export type Tokens = GuiConfig['tokens']
+
+export type TokensParsed = {
+  [Key in keyof Required<Tokens>]: TokenPrefixed<Tokens[Key]>
+}
+
+type TokenPrefixed<A extends { [key: string]: any }> = {
+  [Key in Ensure$Prefix<keyof A> | keyof A]: A[keyof A]
+}
+
+type Ensure$Prefix<A extends string | number | symbol> = A extends
+  | string
+  | number
+  | boolean
+  ? A extends `$${string | number}`
+    ? A
+    : `$${A}`
+  : never
+
+export type TokensMerged = TokensParsed & Tokens
+
+export type Shorthands = GuiConfig['shorthands']
+export type Media = GuiConfig['media']
+export type Themes = GuiConfig['themes']
+export type ThemeName = Exclude<GetAltThemeNames<keyof Themes>, number>
+export type ThemeTokens = `$${ThemeKeys}`
+// Animation names (slow, fast, bouncy) for the `transition` prop
+// Extract animation keys from the driver's `animations` property
+// The AnimationDriver<Config> has an `animations: Config` property
+// Use Extract<keyof A, string> to filter out number/symbol keys from fallback case
+type GetAnimationsFromDriver<T> = T extends { animations: infer A }
+  ? Extract<keyof A, string>
+  : never
+
+// For multi-driver configs like { default: AnimationDriver, css: AnimationDriver }
+// Extract from the 'default' driver or first driver found
+type GetAnimationsFromMultiDriver<T> = T extends { default: infer D }
+  ? GetAnimationsFromDriver<D>
+  : T extends { [key: string]: infer D }
+    ? GetAnimationsFromDriver<D>
+    : never
+
+// Extract just the AnimationDriver from the union (excluding AnimationsConfigObject)
+type ExtractDriver<T> = Extract<T, AnimationDriver<any>>
+
+// Main extraction - use Extract to get AnimationDriver from union, then get keys
+type InferredTransitionKeys =
+  ExtractDriver<GuiConfig['animations']> extends AnimationDriver<any>
+    ? GetAnimationsFromDriver<ExtractDriver<GuiConfig['animations']>>
+    : GetAnimationsFromMultiDriver<GuiConfig['animations']>
+
+export type TransitionKeys = InferredTransitionKeys
+
+// Driver keys (default, css, spring) for the `animatedBy` prop
+// Gets driver keys directly from GuiConfig.animationDriverKeys
+// Falls back to 'default' only when GuiCustomConfig is empty (no augmentation)
+// The Exclude<X, undefined> handles optional property, then we intersect with string
+// to ensure only string keys (not symbols/numbers)
+export type AnimationDriverKeys =
+  | 'default'
+  | Extract<Exclude<GuiConfig['animationDriverKeys'], undefined>, string>
+  // add TypeOverride keys for lazy-loaded drivers
+  | (ReturnType<TypeOverride['animationDrivers']> extends 1
+      ? never
+      : ReturnType<TypeOverride['animationDrivers']>)
+
+export type FontLanguages = ArrayIntersection<GuiConfig['fontLanguages']>
+
+export interface ThemeProps {
+  className?: string
+  name?: Exclude<ThemeName, number> | null
+  componentName?: string
+  children?: any
+  reset?: boolean
+  debug?: DebugProp
+  // on the web, for portals we need to re-insert className
+  forceClassName?: boolean
+
+  // used internally for shallow themes
+  shallow?: boolean
+}
+
+// more low level
+export type UseThemeWithStateProps = ThemeProps & {
+  deopt?: boolean
+  passThrough?: boolean
+  disable?: boolean
+  needsUpdate?: () => boolean
+  unstyled?: boolean
+}
+
+type ArrayIntersection<A extends any[]> = A[keyof A]
+
+type GetAltThemeNames<S> =
+  | (S extends `${infer Theme}_${infer Alt}` ? Theme | GetAltThemeNames<Alt> : S)
+  | S
+
+type AllowedValueSettingBase =
+  | boolean
+  | 'strict'
+  | 'somewhat-strict'
+  | 'strict-web'
+  | 'somewhat-strict-web'
+
+type AllowedStyleValuesSettingSize = AllowedValueSettingBase | 'number' | 'percent'
+type AllowedStyleValuesSettingZIndex = AllowedValueSettingBase | 'number'
+type AllowedStyleValuesSettingRadius = AllowedValueSettingBase | 'number'
+type AllowedStyleValuesSettingColor = AllowedValueSettingBase | 'named'
+
+type AllowedStyleValuesSettingPerCategory = {
+  space?: AllowedStyleValuesSettingSize
+  size?: AllowedStyleValuesSettingSize
+  radius?: AllowedStyleValuesSettingRadius
+  zIndex?: AllowedStyleValuesSettingZIndex
+  color?: AllowedStyleValuesSettingColor
+}
+
+type AllowedStyleValuesSetting =
+  | AllowedValueSettingBase
+  | AllowedStyleValuesSettingPerCategory
+
+type AutocompleteSpecificTokensSetting = boolean | 'except-special'
+
+export interface GenericGuiSettings {
+  /**
+   * When true, flexBasis will be set to 0 when flex is positive. This will be
+   * the default in v2 of Hanzo GUI alongside an alternative mode for web compat.
+   */
+  styleCompat?: 'react-native' | 'legacy'
+
+  // TODO
+  /**
+   * When true, Hanzo GUI will always prefer a more specific style prop over a
+   * less specific one.
+   *
+   * By default, Hanzo GUI processes all style props in order of definition on the
+   * object. This is a bit strange to most people, but it gets around many
+   * annoying issues with specificity. You can see our docs on this here:
+   * https://gui.hanzo.ai/docs/intro/styles#style-order-is-important
+   *
+   * But this can be confusing in simple cases, like when you do:
+   *
+   *   <View paddingTop={0} padding={10} />
+   *
+   * This would set paddingTop ultimately to be 10, because padding comes after
+   * paddingTop. When this setting is set to true, paddingTop will always beat
+   * padding, because it is more specific.
+   *
+   * For variants, it will still take the prop order as definitive.
+   *
+   *
+   * @default false
+   */
+  // preferSpecificStyleProps?: boolean
+
+  /**
+   * Set up allowed values on style props, this is only a type-level validation.
+   *
+   * "strict" - only allows tokens for any token-enabled properties "strict-web"
+   * - same as strict but allows for web-specific tokens like auto/inherit
+   * "somewhat-strict" - allow tokens or: for space/size: string% or numbers for
+   * radius: number for zIndex: number for color: named colors or rgba/hsla
+   * strings "somewhat-strict-web" - same as somewhat-strict but allows for
+   * web-specific tokens
+   *
+   * @default false - allows any string (or number for styles that accept
+   * numbers)
+   *
+   */
+  allowedStyleValues?: AllowedStyleValuesSetting
+
+  /**
+   * Set up if "specific tokens" ($color.name) are added to the types where
+   * tokens are allowed. The VSCode autocomplete puts specific tokens above the
+   * regular ones, which leads to worse DX. If true this setting removes the
+   * specific token from types for the defined categories.
+   *
+   * If set to "except-special", specific tokens will autocomplete only if they
+   * don't normally use one of the special token groups: space, size, radius,
+   * zIndex, color.
+   *
+   * @default except-special
+   */
+  autocompleteSpecificTokens?: AutocompleteSpecificTokensSetting
+
+  /**
+   * On iOS, this enables a mode where Hanzo GUI returns color values using
+   * `DynamicColorIOS` This is a React Native built in feature, you can read the
+   * docs here: https://reactnative.dev/docs/dynamiccolorios
+   *
+   * We're working to make this enabled by default without any setting, but
+   * Hanzo GUI themes support inversing and/or changing to light/dark at any point
+   * in the tree. We haven't implemented support for either of these cases when
+   * combined with this feature.
+   *
+   * So - as long as you:
+   *
+   *   1. Only use light/dark changes of themes at the root of your app
+   *   2. Always change light/dark alongside the Appearance.colorScheme
+   *
+   * Then this feature is safe to turn on and will significantly speed up
+   * dark/light re-renders.
+   */
+  fastSchemeChange?: boolean
+
+  /**
+   * On Web, this allows changing the behavior of container groups which by
+   * default uses `container-type: inline-size`.
+   */
+  webContainerType?:
+    | 'normal'
+    | 'size'
+    | 'inline-size'
+    | 'inherit'
+    | 'initial'
+    | 'revert'
+    | 'revert-layer'
+
+  /**
+   * Only allow shorthands when enabled. Recommended to be true to avoid having
+   * two ways to style the same property.
+   */
+  onlyAllowShorthands?: boolean | undefined
+
+  /**
+   * Define a default font, for better types and default font on Text
+   */
+  defaultFont?: string
+
+  /**
+   * Web-only: define CSS text-selection styles
+   */
+  selectionStyles?: (theme: Record<string, string>) => null | {
+    backgroundColor?: any
+    color?: any
+  }
+
+  /**
+   * If building a non-server rendered app, set this to true.
+   *
+   * For SSR compatibility on the web, Hanzo GUI will render once with the settings
+   * from `mediaQueryDefaultActive` set for all media queries. Then, it will render
+   * again after the initial render using the proper media query values. This is so that
+   * hydration will match perfectly with the server.
+   *
+   * Setting disableSSR will avoid this second render by setting the media query state
+   * to the actual browser dimensions on initial load. This is only useful for client-only
+   * apps.
+   *
+   * @default false
+   *
+   */
+  disableSSR?: boolean
+
+  /**
+   * For the first render, determines which media queries are true, this only
+   * affects things on native or on web if you disableSSR, as otherwise Gui
+   * relies on CSS to avoid the need for re-rendering on first render.
+   */
+  mediaQueryDefaultActive?: Record<string, boolean>
+
+  /**
+   * Adds @media(prefers-color-scheme) media queries for dark/light, must be set
+   * true if you are supporting system preference for light and dark mode themes
+   */
+  shouldAddPrefersColorThemes?: boolean
+
+  /**
+   * If you want to style your <body> tag to use theme CSS variables on web, you
+   * must place the theme className onto the body element or above. This will do so.
+   * If disabled, Hanzo GUI will place the className onto the element rendered by
+   * the GuiProvider
+   *
+   * @default html
+   */
+  addThemeClassName?: 'body' | 'html' | false
+
+  /**
+   * Sets the default position value for all Hanzo GUI components.
+   * @default 'static'
+   */
+  defaultPosition?: 'static' | 'relative'
+
+  /**
+   * Sets the base font size for rem calculations on native platforms.
+   * On web, browsers use the root font size (typically 16px).
+   * @default 16
+   */
+  remBaseFontSize?: number
+
+  /**
+   * When true, removes the individual longhand style props for border,
+   * outline, and shadow (borderWidth, borderStyle, borderColor,
+   * outlineWidth, outlineStyle, outlineColor, outlineOffset,
+   * shadowColor, shadowOffset, shadowOpacity, shadowRadius) from the
+   * type system, encouraging use of the combined shorthand props instead
+   * (`border`, `outline`, `boxShadow`).
+   *
+   * This avoids specificity issues when mixing shorthand and longhand
+   * props in atomic CSS output.
+   *
+   * Note: this is type-level only - it does not change runtime behavior.
+   *
+   * @default false
+   */
+  onlyShorthandStyleProps?: boolean
+}
+
+export type GuiSettings = GuiConfig['settings']
+
+export type BaseStyleProps = {
+  [Key in keyof TextStylePropsBase]?: TextStyle[Key] | GetThemeValueForKey<Key>
+} & {
+  [Key in keyof StackStyleBase]?: StackStyle[Key] | GetThemeValueForKey<Key>
+}
+
+/**
+ * Animation drivers config - can be a single driver or named drivers object.
+ * If object, must include a 'default' key.
+ */
+export type AnimationsConfig = AnimationDriver<any> | AnimationsConfigObject
+
+export type AnimationsConfigObject = {
+  default: AnimationDriver<any>
+  [key: string]: AnimationDriver<any>
+}
+
+export type CreateGuiProps = {
+  reactNative?: any
+  shorthands?: CreateShorthands
+  media?: GenericGuiConfig['media']
+  /**
+   * Animation driver(s) configuration.
+   * Can be a single driver or an object of named drivers (must include 'default').
+   * @example
+   * // Single driver
+   * animations: createAnimations({ slow: '...', fast: '...' })
+   * // Multiple named drivers
+   * animations: { default: cssDriver, spring: motiDriver }
+   */
+  animations?: AnimationsConfig
+  fonts?: GenericGuiConfig['fonts']
+  tokens?: GenericGuiConfig['tokens']
+  themes?: {
+    [key: string]: {
+      [key: string]: string | number | Variable
+    }
+  }
+
+  settings?: Partial<GenericGuiSettings>
+
+  /**
+   * Web-only: define text-selection CSS
+   */
+  selectionStyles?: (theme: Record<string, string>) => null | {
+    backgroundColor?: any
+    color?: any
+  }
+
+  defaultProps?: Record<string, any> & {
+    Text?: TextProps
+    View?: StackNonStyleProps & StackStyle
+  }
+}
+
+export type GetCSS = (opts?: {
+  separator?: string
+  exclude?: 'themes' | 'design-system' | null
+  sinceLastCall?: boolean
+}) => string
+
+// this is the config generated via createGui()
+export type GuiInternalConfig<
+  A extends GenericTokens = GenericTokens,
+  B extends GenericThemes = GenericThemes,
+  C extends GenericShorthands = GenericShorthands,
+  D extends GenericMedia = GenericMedia,
+  E extends GenericAnimations = GenericAnimations,
+  F extends GenericFonts = GenericFonts,
+  G extends GenericGuiSettings = GenericGuiSettings,
+  // preserve the raw animation driver keys ('default' | 'css' | etc)
+  // defaults to string so generic GuiInternalConfig accepts any driver keys
+  AnimDriverKeys extends string = string,
+> = Omit<CreateGuiProps, keyof GenericGuiConfig> &
+  Omit<CreateGuiConfig<A, B, C, D, E, F, G, AnimDriverKeys>, 'tokens'> & {
+    // TODO need to make it this but this breaks types, revisit
+    // animations: E //AnimationDriver<E>
+    // with $ prefixes for fast lookups (one time cost at startup vs every render)
+    tokens: Tokenify<A>
+    tokensParsed: Tokenify<A>
+    themeConfig: any
+    fontsParsed: GenericFonts
+    getCSS: GetCSS
+    getNewCSS: GetCSS
+    parsed: boolean
+    inverseShorthands: Record<string, string>
+    userShorthands: C
+    reactNative?: any
+    fontSizeTokens: Set<string>
+    specificTokens: Record<string, Variable>
+    settings: Omit<GenericGuiSettings, keyof G> & G
+    defaultFont?: string
+    defaultFontToken: `${string}`
+    // multi-driver animation config (e.g., { default: motionDriver, css: cssDriver })
+    // used for component-level driver selection via animatedBy prop
+    animationDrivers?: Record<string, AnimationDriver>
+  }
+
+export type GetAnimationKeys<A extends GenericGuiConfig> = keyof A['animations']
+
+// prevents const intersections from being clobbered into string, keeping the consts
+export type UnionableString = string & {}
+export type UnionableNumber = number & {}
+
+type GenericFontKey = string | number | symbol
+
+export type GenericFont<Key extends GenericFontKey = GenericFontKey> = {
+  size: { [key in Key]: number | Variable }
+  family?: string | Variable
+  lineHeight?: Partial<{ [key in Key]: number | Variable }> | undefined
+  letterSpacing?: Partial<{ [key in Key]: number | Variable }> | undefined
+  weight?: Partial<{ [key in Key]: number | string | Variable }> | undefined
+  style?: Partial<{ [key in Key]: RNTextStyle['fontStyle'] | Variable }> | undefined
+  transform?:
+    | Partial<{ [key in Key]: RNTextStyle['textTransform'] | Variable }>
+    | undefined
+  color?: Partial<{ [key in Key]: string | Variable }> | undefined
+  // for native use only, lets you map to alternative fonts
+  face?:
+    | Partial<{
+        [key in FontWeightValues]: { normal?: string; italic?: string }
+      }>
+    | undefined
+}
+
+// media
+export type MediaQueryObject = { [key: string]: string | number | string }
+export type MediaQueryKey = keyof Media
+export type MediaPropKeys = `$${MediaQueryKey}`
+export type MediaQueryState = { [key in MediaQueryKey]: boolean }
+
+export type ThemeMediaKeys<TK extends keyof Themes = keyof Themes> =
+  `$theme-${TK extends `${string}_${string}` ? never : TK}`
+
+export type PlatformMediaKeys = `$platform-${AllPlatforms}`
+
+export interface TypeOverride {
+  groupNames(): 1
+  animationDrivers(): 1
+}
+
+export type GroupNames =
+  ReturnType<TypeOverride['groupNames']> extends 1
+    ? never
+    : ReturnType<TypeOverride['groupNames']>
+
+type ParentMediaStates = 'hover' | 'press' | 'focus' | 'focusVisible' | 'focusWithin'
+
+export type GroupMediaKeys =
+  | `$group-${GroupNames}`
+  | `$group-${GroupNames}-${ParentMediaStates}`
+  | `$group-${GroupNames}-${MediaQueryKey}`
+  | `$group-${GroupNames}-${MediaQueryKey}-${ParentMediaStates}`
+  | `$group-${ParentMediaStates}`
+  | `$group-${MediaQueryKey}`
+  | `$group-${MediaQueryKey}-${ParentMediaStates}`
+
+export type WithMediaProps<A> = {
+  [Key in
+    | MediaPropKeys
+    | GroupMediaKeys
+    | ThemeMediaKeys
+    | PlatformMediaKeys]?: Key extends MediaPropKeys
+    ? A & {
+        // TODO we can support $theme- inside media queries here if we change to ThemeMediaKeys | PlatformMediaKeys
+        [Key in PlatformMediaKeys]?: AddWebOnlyStyleProps<A>
+      }
+    : Key extends `$platform-web`
+      ? AddWebOnlyStyleProps<A>
+      : A
+}
+
+type AddWebOnlyStyleProps<A> = {
+  [SubKey in keyof A | keyof CSSProperties]?: SubKey extends keyof CSSProperties
+    ? CSSProperties[SubKey]
+    : SubKey extends keyof A
+      ? A[SubKey]
+      : SubKey extends keyof WebOnlyValidStyleValues
+        ? WebOnlyValidStyleValues[SubKey]
+        : never
+}
+
+export type WebOnlyValidStyleValues = {
+  position: '-webkit-sticky'
+}
+
+export type MediaQueries = {
+  [key in MediaQueryKey]: MediaQueryObject
+}
+
+export interface MediaQueryList {
+  addListener(listener?: any): void
+  removeListener(listener?: any): void
+  match?: (query: string, dimensions: { width: number; height: number }) => boolean
+  matches: boolean
+}
+
+export type MatchMedia = (query: string) => MediaQueryList
+
+// createComponent props helpers
+
+// transition="bouncy"
+// transition={['bouncy', {  }]}
+// { all: 'name' }
+
+// TODO can override for better types
+export type AnimationConfigType = any
+
+/**
+ * Spring configuration parameters that can override preset defaults.
+ * Use with array syntax: transition={['bouncy', { stiffness: 1000, damping: 70 }]}
+ */
+export type TransitionSpringConfig = {
+  stiffness?: number
+  damping?: number
+  mass?: number
+  tension?: number
+  friction?: number
+  velocity?: number
+  overshootClamping?: boolean
+  duration?: number
+  bounciness?: number
+  speed?: number
+}
+
+export type TransitionProp =
+  | TransitionKeys
+  | ({
+      default?: TransitionKeys
+      enter?: TransitionKeys
+      exit?: TransitionKeys
+      delay?: number
+    } & TransitionSpringConfig & {
+        [key: string]:
+          | TransitionKeys
+          | {
+              type: TransitionKeys
+              [key: string]: any
+            }
+          | number
+          | boolean
+          | undefined
+      })
+  | [
+      TransitionKeys,
+      {
+        delay?: number
+        enter?: TransitionKeys
+        exit?: TransitionKeys
+      } & TransitionSpringConfig & {
+          [key: string]:
+            | TransitionKeys
+            | {
+                type?: TransitionKeys
+                [key: string]: any
+              }
+            | number
+            | boolean
+            | undefined
+        },
+    ]
+
+/**
+ * Tokens
+ */
+
+type PercentString = `${string}%` & {}
+type RemString = `${number}rem`
+
+type SomewhatSpecificSizeValue = 'auto' | PercentString | RemString | UnionableNumber
+type SomewhatSpecificSpaceValue = 'auto' | PercentString | RemString | UnionableNumber
+
+type VariableString = `var(${string})`
+
+export type SomewhatSpecificColorValue =
+  | CSSColorNames
+  | 'transparent'
+  | (`rgba(${string})` & {})
+  | (`rgb(${string})` & {})
+  | (`hsl(${string})` & {})
+  | (`hsla(${string})` & {})
+  | (`#${string}` & {})
+
+type WebOnlySizeValue =
+  | `${number}vw`
+  | `${number}dvw`
+  | `${number}lvw`
+  | `${number}svw`
+  | `${number}vh`
+  | `${number}dvh`
+  | `${number}lvh`
+  | `${number}svh`
+  | `calc(${string})`
+  | `min(${string})`
+  | `max(${string})`
+  | 'max-content'
+  | 'min-content'
+
+type UserAllowedStyleValuesSetting = Exclude<
+  GuiSettings['allowedStyleValues'],
+  undefined
+>
+
+export type GetThemeValueSettingForCategory<
+  Cat extends keyof AllowedStyleValuesSettingPerCategory,
+> = UserAllowedStyleValuesSetting extends AllowedValueSettingBase | undefined
+  ? UserAllowedStyleValuesSetting
+  : UserAllowedStyleValuesSetting extends AllowedStyleValuesSettingPerCategory
+    ? UserAllowedStyleValuesSetting[Cat]
+    : true
+
+export type GetThemeValueFallbackFor<
+  Setting,
+  StrictValue,
+  SomewhatStrictValue,
+  LooseValue,
+  WebOnlyValue,
+> = Setting extends 'strict'
+  ? StrictValue
+  : Setting extends 'strict-web'
+    ? StrictValue | WebOnlyValue
+    : Setting extends 'somewhat-strict'
+      ? SomewhatStrictValue
+      : Setting extends 'somewhat-strict-web'
+        ? SomewhatStrictValue | WebOnlyValue
+        : LooseValue
+
+// the most generic fallback for anything not covered by special values
+export type ThemeValueFallback =
+  // for backwards compat with overriding the type we make this either UnionableString
+  // or never if they don't define any UserAllowedStyleValuesSetting
+  | (GuiSettings extends { allowedStyleValues: any } ? never : UnionableString)
+  | Variable
+
+export type AllowedValueSettingSpace = GetThemeValueSettingForCategory<'space'>
+export type AllowedValueSettingSize = GetThemeValueSettingForCategory<'size'>
+export type AllowedValueSettingColor = GetThemeValueSettingForCategory<'color'>
+export type AllowedValueSettingZIndex = GetThemeValueSettingForCategory<'zIndex'>
+export type AllowedValueSettingRadius = GetThemeValueSettingForCategory<'radius'>
+
+export type WebStyleValueUniversal = 'unset' | 'inherit' | VariableString
+
+export type ThemeValueFallbackSpace =
+  | ThemeValueFallback
+  | GetThemeValueFallbackFor<
+      AllowedValueSettingSpace,
+      never,
+      SomewhatSpecificSpaceValue,
+      UnionableString | UnionableNumber,
+      WebStyleValueUniversal | WebOnlySizeValue
+    >
+
+export type SpaceValue = number | SpaceTokens | ThemeValueFallback
+
+export type ThemeValueFallbackSize = GetThemeValueFallbackFor<
+  AllowedValueSettingSize,
+  never,
+  SomewhatSpecificSizeValue,
+  UnionableString | UnionableNumber,
+  WebStyleValueUniversal | WebOnlySizeValue
+>
+
+export type ThemeValueFallbackColor =
+  | ThemeValueFallback
+  | GetThemeValueFallbackFor<
+      AllowedValueSettingColor,
+      never,
+      SomewhatSpecificColorValue,
+      UnionableString | UnionableNumber,
+      WebStyleValueUniversal
+    >
+
+export type ThemeValueFallbackRadius =
+  | ThemeValueFallback
+  | GetThemeValueFallbackFor<
+      AllowedValueSettingRadius,
+      never,
+      UnionableNumber,
+      UnionableNumber,
+      WebStyleValueUniversal
+    >
+
+export type ThemeValueFallbackZIndex =
+  | ThemeValueFallback
+  | GetThemeValueFallbackFor<
+      AllowedValueSettingZIndex,
+      never,
+      UnionableNumber,
+      UnionableNumber,
+      WebStyleValueUniversal
+    >
+
+export type GetTokenString<A> = A extends `$${string}`
+  ? A
+  : A extends string | number
+    ? `$${A}`
+    : `$${string}`
+
+export type SpecificTokens<
+  Record = Tokens,
+  RK extends keyof Record = keyof Record,
+> = RK extends string
+  ? `$${RK}.${keyof Record[RK] extends string | number
+      ? // remove any $ prefix so instead of $size.$sm its $size.sm
+        keyof Record[RK] extends `$${infer X}`
+        ? X
+        : keyof Record[RK]
+      : never}`
+  : never
+
+// defaults to except-special
+export type SpecificTokensSpecial = GuiSettings extends {
+  autocompleteSpecificTokens: infer Val
+}
+  ? Val extends 'except-special' | undefined
+    ? never
+    : SpecificTokens
+  : SpecificTokens
+
+export type SizeTokens =
+  | SpecificTokensSpecial
+  | ThemeValueFallbackSize
+  | GetTokenString<keyof Tokens['size']>
+
+export type SpaceTokens =
+  | SpecificTokensSpecial
+  | GetTokenString<keyof Tokens['space']>
+  | ThemeValueFallbackSpace
+
+export type ColorTokens =
+  | SpecificTokensSpecial
+  | GetTokenString<keyof Tokens['color']>
+  | GetTokenString<keyof ThemeParsed>
+  | CSSColorNames
+
+export type ZIndexTokens =
+  | SpecificTokensSpecial
+  | GetTokenString<keyof Tokens['zIndex']>
+  | ThemeValueFallbackZIndex
+  | number
+
+export type RadiusTokens =
+  | SpecificTokensSpecial
+  | GetTokenString<keyof Tokens['radius']>
+  | ThemeValueFallbackRadius
+  | number
+  | RemString
+
+export type NonSpecificTokens =
+  | GetTokenString<keyof Tokens['radius']>
+  | GetTokenString<keyof Tokens['zIndex']>
+  | GetTokenString<keyof Tokens['color']>
+  | GetTokenString<keyof Tokens['space']>
+  | GetTokenString<keyof Tokens['size']>
+
+export type Token =
+  | NonSpecificTokens
+  | (GuiSettings extends { autocompleteSpecificTokens: false }
+      ? never
+      : SpecificTokens)
+
+export type ColorStyleProp = ThemeValueFallbackColor | ColorTokens
+
+// fonts
+type DefaultFont = GuiSettings['defaultFont']
+
+export type Fonts = DefaultFont extends string
+  ? GuiConfig['fonts'][DefaultFont]
+  : never
+
+export type Font = ParseFont<Fonts>
+
+export type GetTokenFontKeysFor<
+  A extends
+    | 'size'
+    | 'weight'
+    | 'letterSpacing'
+    | 'family'
+    | 'lineHeight'
+    | 'transform'
+    | 'style'
+    | 'color',
+> = keyof GuiConfig['fonts']['body'][A]
+
+export type FontTokens = GetTokenString<keyof GuiConfig['fonts']>
+export type FontFamilyTokens = GetTokenString<GetTokenFontKeysFor<'family'>>
+export type FontSizeTokens =
+  | GetTokenString<GetTokenFontKeysFor<'size'>>
+  | number
+  | RemString
+export type FontLineHeightTokens =
+  | `$${GetTokenFontKeysFor<'lineHeight'>}`
+  | number
+  | RemString
+export type FontWeightValues =
+  | `${1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9}00`
+  | 'bold'
+  | 'normal'
+export type FontWeightTokens = `$${GetTokenFontKeysFor<'weight'>}` | FontWeightValues
+export type FontColorTokens = `$${GetTokenFontKeysFor<'color'>}` | number
+export type FontLetterSpacingTokens =
+  | `$${GetTokenFontKeysFor<'letterSpacing'>}`
+  | number
+  | RemString
+export type FontStyleTokens =
+  | `$${GetTokenFontKeysFor<'style'>}`
+  | RNTextStyle['fontStyle']
+export type FontTransformTokens =
+  | `$${GetTokenFontKeysFor<'transform'>}`
+  | RNTextStyle['textTransform']
+
+export type ParseFont<A extends GenericFont> = {
+  size: TokenPrefixed<A['size']>
+  lineHeight: TokenPrefixedIfExists<A['lineHeight']>
+  letterSpacing: TokenPrefixedIfExists<A['letterSpacing']>
+  weight: TokenPrefixedIfExists<A['weight']>
+  family: TokenPrefixedIfExists<A['family']>
+  style: TokenPrefixedIfExists<A['style']>
+  transform: TokenPrefixedIfExists<A['transform']>
+  color: TokenPrefixedIfExists<A['color']>
+  face: TokenPrefixedIfExists<A['face']>
+}
+
+export type TokenPrefixedIfExists<A> =
+  A extends Record<string, any> ? TokenPrefixed<A> : {}
+
+//
+// adds theme short values to relevant props
+//
+
+export type ThemeValueByCategory<K extends string | number | symbol> = K extends 'theme'
+  ? ThemeTokens
+  : K extends 'size'
+    ? SizeTokens
+    : K extends 'font'
+      ? FontTokens
+      : K extends 'fontSize'
+        ? FontSizeTokens
+        : K extends 'space'
+          ? SpaceTokens
+          : K extends 'color'
+            ? ColorTokens
+            : K extends 'zIndex'
+              ? ZIndexTokens
+              : K extends 'radius'
+                ? RadiusTokens
+                : K extends 'lineHeight'
+                  ? FontLineHeightTokens
+                  : K extends 'fontWeight'
+                    ? FontWeightTokens
+                    : K extends 'letterSpacing'
+                      ? FontLetterSpacingTokens
+                      : K extends keyof Tokens
+                        ? // fallback to user-defined tokens
+                          GetTokenString<keyof Tokens[K]>
+                        : never
+
+export type FontKeys = 'fontFamily'
+export type FontSizeKeys = 'fontSize'
+export type FontWeightKeys = 'fontWeight'
+export type FontLetterSpacingKeys = 'letterSpacing'
+export type LineHeightKeys = 'lineHeight'
+export type ZIndexKeys = 'zIndex'
+export type OpacityKeys = 'opacity'
+
+export type ThemeValueGet<K extends string | number | symbol> = K extends 'theme'
+  ? ThemeTokens
+  : K extends SizeKeys
+    ? SizeTokens
+    : K extends FontKeys
+      ? FontTokens
+      : K extends FontSizeKeys
+        ? FontSizeTokens
+        : K extends `${`border${string | ''}Radius`}`
+          ? RadiusTokens
+          : K extends SpaceKeys
+            ? K extends 'shadowOffset'
+              ? { width: SpaceTokens; height: SpaceTokens }
+              : SpaceTokens
+            : K extends ColorKeys
+              ? ColorTokens | ThemeValueFallbackColor
+              : K extends ZIndexKeys
+                ? ZIndexTokens
+                : K extends LineHeightKeys
+                  ? FontLineHeightTokens
+                  : K extends FontWeightKeys
+                    ? FontWeightTokens
+                    : K extends FontLetterSpacingKeys
+                      ? FontLetterSpacingTokens
+                      : K extends OpacityKeys
+                        ? SpecificTokens | ThemeValueFallback
+                        : never
+
+export type GetThemeValueForKey<K extends string | symbol | number> =
+  | ThemeValueGet<K>
+  | ThemeValueFallback
+  | (GuiSettings extends { autocompleteSpecificTokens: infer Val }
+      ? Val extends true | undefined
+        ? SpecificTokens
+        : never
+      : never)
+
+export type WithThemeValues<T extends object> = {
+  [K in keyof T]: ThemeValueGet<K> extends never
+    ? K extends keyof ExtraBaseProps
+      ? T[K]
+      : T[K] | 'unset'
+    : GetThemeValueForKey<K> | Exclude<T[K], string> | 'unset'
+}
+
+export type NarrowShorthands = Narrow<Shorthands>
+export type Longhands = NarrowShorthands[keyof NarrowShorthands]
+
+type OnlyAllowShorthands = GuiConfig['settings']['onlyAllowShorthands']
+type OnlyShorthandStyleProps = GuiConfig['settings']['onlyShorthandStyleProps']
+
+// longhand style props that overlap with border/outline/shadow shorthands
+type ShorthandLonghandProps =
+  | 'borderWidth'
+  | 'borderStyle'
+  | 'borderColor'
+  | 'outlineWidth'
+  | 'outlineStyle'
+  | 'outlineColor'
+  | 'outlineOffset'
+  | 'shadowColor'
+  | 'shadowOffset'
+  | 'shadowOpacity'
+  | 'shadowRadius'
+
+// adds shorthand props
+export type WithShorthands<StyleProps> = {
+  [Key in keyof Shorthands]?: Shorthands[Key] extends keyof StyleProps
+    ? StyleProps[Shorthands[Key]] | null
+    : undefined
+}
+
+// adds pseudo props
+// PseudoStyleWithTransition allows transition inside pseudo-style props for enter/exit timing
+export type PseudoStyleWithTransition<A> = A & { transition?: TransitionProp | null }
+
+export type WithPseudoProps<A> = {
+  hoverStyle?: PseudoStyleWithTransition<A> | null
+  pressStyle?: PseudoStyleWithTransition<A> | null
+  focusStyle?: PseudoStyleWithTransition<A> | null
+  focusWithinStyle?: PseudoStyleWithTransition<A> | null
+  focusVisibleStyle?: PseudoStyleWithTransition<A> | null
+  disabledStyle?: PseudoStyleWithTransition<A> | null
+  exitStyle?: PseudoStyleWithTransition<A> | null
+  enterStyle?: PseudoStyleWithTransition<A> | null
+}
+
+// type for transitions extracted from pseudo-style props (e.g., hoverStyle.transition)
+// includes $group-*-hover, $group-*-press, $group-*-focus patterns
+export type PseudoTransitions = Partial<
+  Record<keyof WithPseudoProps<any>, TransitionProp | null>
+> & {
+  // allow $group-{name}-{pseudo} keys dynamically
+  [key: `$group-${string}-${'hover' | 'press' | 'focus'}`]:
+    | TransitionProp
+    | null
+    | undefined
+}
+
+export type PseudoPropKeys = keyof WithPseudoProps<any>
+
+export type PseudoStyles = {
+  hoverStyle?: ViewStyle
+  pressStyle?: ViewStyle
+  focusStyle?: ViewStyle
+  focusWithinStyle?: ViewStyle
+  focusVisibleStyle?: ViewStyle
+  disabledStyle?: ViewStyle
+  enterStyle?: ViewStyle
+  exitStyle?: ViewStyle
+}
+
+export type AllPlatforms = 'web' | 'native' | 'android' | 'ios'
+
+// MUST EXPORT ALL IN BETWEEN or else it expands declarations like crazy
+
+//
+// add both theme and shorthands
+//
+type MaybeOmitLonghands<A> = OnlyShorthandStyleProps extends true
+  ? Omit<A, ShorthandLonghandProps>
+  : A
+
+export type WithThemeAndShorthands<
+  A extends object,
+  Variants = {},
+> = OnlyAllowShorthands extends true
+  ? WithThemeValues<MaybeOmitLonghands<Omit<A, Longhands>>> &
+      Variants &
+      WithShorthands<WithThemeValues<A>>
+  : WithThemeValues<MaybeOmitLonghands<A>> & Variants & WithShorthands<WithThemeValues<A>>
+
+//
+// combines all of theme, shorthands, pseudos...
+//
+export type WithThemeShorthandsAndPseudos<
+  A extends object,
+  Variants = {},
+> = WithThemeAndShorthands<A, Variants> &
+  WithPseudoProps<WithThemeAndShorthands<A, Variants>>
+
+//
+// ... media queries and animations
+//
+export type WithThemeShorthandsPseudosMedia<
+  A extends object,
+  Variants = {},
+> = WithThemeShorthandsAndPseudos<A, Variants> &
+  WithMediaProps<WithThemeShorthandsAndPseudos<A, Variants>>
+
+/**
+ * Base style-only props (no media, pseudo):
+ */
+
+type Px = `${string | number}px`
+type PxOrPct = Px | `${string | number}%`
+type TwoValueTransformOrigin = `${PxOrPct | 'left' | 'center' | 'right'} ${
+  | PxOrPct
+  | 'top'
+  | 'center'
+  | 'bottom'}`
+
+export interface TransformStyleProps {
+  /**
+   * Maps to translateX
+   */
+  x?: number
+  /**
+   * Maps to translateY
+   */
+  y?: number
+  perspective?: number
+  scale?: number
+  scaleX?: number
+  scaleY?: number
+  skewX?: string
+  skewY?: string
+  matrix?: number[]
+  rotate?: `${number}deg` | UnionableString
+  rotateY?: `${number}deg` | UnionableString
+  rotateX?: `${number}deg` | UnionableString
+  rotateZ?: `${number}deg` | UnionableString
+}
+
+// box shadow presets - one example per pattern for autocomplete hints
+type BoxShadowPreset =
+  | '0 0' // offset only
+  | '0 1px 2px' // offset + blur
+  | '0 1px 2px 0' // offset + blur + spread
+  | '0 1px 2px $shadowColor' // offset + blur + color token
+  | '0 1px 3px 0 $shadowColor' // offset + blur + spread + color token
+  | '0 4px 6px -1px $shadowColor' // negative spread
+  | 'inset 0 2px 4px $shadowColor' // inset
+  | 'none'
+
+// Box Shadow - CSS string format (e.g. "0 4px 8px $shadowColor")
+// Supports embedded $tokens that get resolved at runtime
+export type BoxShadowValue = BoxShadowPreset | (string & {})
+
+// filter presets - one example per function for autocomplete hints
+type FilterPreset =
+  | 'blur(4px)'
+  | 'brightness(1.2)'
+  | 'contrast(1.2)'
+  | 'drop-shadow(0 4px 8px $shadowColor)'
+  | 'grayscale(1)'
+  | 'hue-rotate(90deg)'
+  | 'invert(1)'
+  | 'opacity(0.5)'
+  | 'saturate(1.5)'
+  | 'sepia(1)'
+  | 'none'
+
+// Filter - CSS string format (e.g. "blur(10px) brightness(1.2)")
+// Supports embedded $tokens that get resolved at runtime
+export type FilterValue = FilterPreset | (string & {})
+
+// border shorthand presets - examples for autocomplete hints
+type BorderPreset =
+  | '1px solid' // width + style
+  | '1px solid $borderColor' // width + style + color token
+  | '2px dashed $borderColor' // width + style + color
+  | '1px dotted red' // width + style + color
+  | 'none'
+
+// Border - CSS shorthand string format (e.g. "1px solid $borderColor")
+// Expands to borderWidth, borderStyle, borderColor on web and native
+// Note: on native, only supports a single border (all sides)
+export type BorderValue = BorderPreset | (string & {})
+
+// outline shorthand presets - examples for autocomplete hints
+type OutlinePreset =
+  | '1px solid' // width + style
+  | '1px solid $outlineColor' // width + style + color token
+  | '2px dashed $outlineColor' // width + style + color
+  | '1px dotted red' // width + style + color
+  | 'none'
+
+// Outline - CSS shorthand string format (e.g. "2px solid $outlineColor")
+// Expands to outlineWidth, outlineStyle, outlineColor on native
+export type OutlineValue = OutlinePreset | (string & {})
+
+interface ExtraStyleProps {
+  /**
+   * Controls the curve style of rounded corners.
+   * - 'circular': Standard circular arc corners (default)
+   * - 'continuous': Apple's "squircle" style continuous curve
+   * @platform iOS 13+
+   */
+  borderCurve?: 'circular' | 'continuous'
+  /**
+   * Web-only style property. Will be omitted on native.
+   */
+  contain?: Properties['contain']
+  /**
+   * Cursor style. On web, supports all CSS cursor values.
+   * On iOS 17+ (trackpad/stylus), only 'auto' and 'pointer' are supported.
+   */
+  cursor?: Properties['cursor']
+  /**
+   * Outline color. Supported on web and native.
+   */
+  outlineColor?: ColorStyleProp
+  /**
+   * Outline offset. Supported on web and native.
+   */
+  outlineOffset?: SpaceValue
+  /**
+   * Outline style. Supported on web and native.
+   */
+  outlineStyle?: 'solid' | 'dotted' | 'dashed' | (string & {})
+  /**
+   * Outline width. Supported on web and native.
+   */
+  outlineWidth?: SpaceValue
+  /**
+   * CSS outline shorthand string. Supports tokens: "2px solid $outlineColor"
+   * Expands to outlineWidth, outlineStyle, outlineColor on native.
+   * Works on web and native.
+   */
+  outline?: OutlineValue
+  /**
+   * On native, maps to the `selectable` prop on Text (userSelect !== 'none')
+   */
+  userSelect?: Properties['userSelect']
+  /**
+   * Web-only style property. Will be omitted on native.
+   */
+  backdropFilter?: Properties['backdropFilter']
+  /**
+   * Web-only style property. Will be omitted on native.
+   */
+  background?: Properties['background']
+  /**
+   * Web-only style property. Will be omitted on native.
+   */
+  backgroundImage?: Properties['backgroundImage']
+  /**
+   * Web-only style property. Will be omitted on native.
+   */
+  backgroundOrigin?: Properties['backgroundOrigin']
+  /**
+   * Web-only style property. Will be omitted on native.
+   */
+  backgroundPosition?: Properties['backgroundPosition']
+  /**
+   * Web-only style property. Will be omitted on native.
+   */
+  backgroundRepeat?: Properties['backgroundRepeat']
+  /**
+   * Web-only style property. Will be omitted on native.
+   */
+  backgroundSize?: Properties['backgroundSize']
+  // boxSizing - provided by RN's ViewStyle
+  /**
+   * CSS box-shadow string. Supports tokens: "0 4px 8px $shadowColor"
+   * Works on web and native (RN 0.76+).
+   */
+  boxShadow?: BoxShadowValue
+  /**
+   * CSS border shorthand string. Supports tokens: "1px solid $borderColor"
+   * Expands to borderWidth, borderStyle, borderColor.
+   * Works on web and native. On native, applies to all sides.
+   */
+  border?: BorderValue
+  /**
+   * Web-only style property. Will be omitted on native.
+   */
+  overflowX?: Properties['overflowX']
+  /**
+   * Web-only style property. Will be omitted on native.
+   */
+  overflowY?: Properties['overflowY']
+
+  pointerEvents?: ViewProps['pointerEvents']
+
+  /**
+   * The point at which transforms originate from.
+   */
+  transformOrigin?:
+    | PxOrPct
+    | 'left'
+    | 'center'
+    | 'right'
+    | 'top'
+    | 'bottom'
+    | TwoValueTransformOrigin
+    | `${TwoValueTransformOrigin} ${Px}`
+
+  /**
+   * CSS filter string. Example: "blur(10px) brightness(1.2)"
+   * Works on web and native (RN 0.76+). Supports embedded tokens.
+   */
+  filter?: FilterValue
+  // mixBlendMode - provided by RN's ViewStyle
+  // isolation - provided by RN's ViewStyle
+  /**
+   * Web-only style property. Will be omitted on native.
+   */
+  backgroundClip?: Properties['backgroundClip']
+  /**
+   * Web-only style property. Will be omitted on native.
+   */
+  backgroundBlendMode?: Properties['backgroundBlendMode']
+  /**
+   * Web-only style property. Will be omitted on native.
+   */
+  backgroundAttachment?: Properties['backgroundAttachment']
+  /**
+   * Web-only style property. Will be omitted on native.
+   */
+  clipPath?: Properties['clipPath']
+  /**
+   * Web-only style property. Will be omitted on native.
+   */
+  caretColor?: Properties['caretColor']
+  /**
+   * Web-only style property. Will be omitted on native.
+   */
+  transformStyle?: Properties['transformStyle']
+  /**
+   * Web-only style property. Will be omitted on native.
+   */
+  mask?: Properties['mask']
+  /**
+   * Web-only style property. Will be omitted on native.
+   */
+  maskImage?: Properties['maskImage']
+  /**
+   * Web-only style property. Will be omitted on native.
+   */
+  textEmphasis?: Properties['textEmphasis']
+  /**
+   * Web-only style property. Will be omitted on native.
+   */
+  borderImage?: Properties['borderImage']
+  /**
+   * Web-only style property. Will be omitted on native.
+   */
+  float?: Properties['float']
+  /**
+   * Web-only style property. Will be omitted on native.
+   */
+  content?: Properties['content']
+  /**
+   * Web-only style property. Will be omitted on native.
+   */
+  overflowBlock?: Properties['overflowBlock']
+  /**
+   * Web-only style property. Will be omitted on native.
+   */
+  overflowInline?: Properties['overflowInline']
+  /**
+   * Web-only style property. Will be omitted on native.
+   */
+  maskBorder?: Properties['maskBorder']
+  /**
+   * Web-only style property. Will be omitted on native.
+   */
+  maskBorderMode?: Properties['maskBorderMode']
+  /**
+   * Web-only style property. Will be omitted on native.
+   */
+  maskBorderOutset?: Properties['maskBorderOutset']
+  /**
+   * Web-only style property. Will be omitted on native.
+   */
+  maskBorderRepeat?: Properties['maskBorderRepeat']
+  /**
+   * Web-only style property. Will be omitted on native.
+   */
+  maskBorderSlice?: Properties['maskBorderSlice']
+  /**
+   * Web-only style property. Will be omitted on native.
+   */
+  maskBorderSource?: Properties['maskBorderSource']
+  /**
+   * Web-only style property. Will be omitted on native.
+   */
+  maskBorderWidth?: Properties['maskBorderWidth']
+  /**
+   * Web-only style property. Will be omitted on native.
+   */
+  maskClip?: Properties['maskClip']
+  /**
+   * Web-only style property. Will be omitted on native.
+   */
+  maskComposite?: Properties['maskComposite']
+  /**
+   * Web-only style property. Will be omitted on native.
+   */
+  maskMode?: Properties['maskMode']
+  /**
+   * Web-only style property. Will be omitted on native.
+   */
+  maskOrigin?: Properties['maskOrigin']
+  /**
+   * Web-only style property. Will be omitted on native.
+   */
+  maskPosition?: Properties['maskPosition']
+  /**
+   * Web-only style property. Will be omitted on native.
+   */
+  maskRepeat?: Properties['maskRepeat']
+  /**
+   * Web-only style property. Will be omitted on native.
+   */
+  maskSize?: Properties['maskSize']
+  /**
+   * Web-only style property. Will be omitted on native.
+   */
+  maskType?: Properties['maskType']
+  /**
+   * Web-only style property. Will be omitted on native.
+   */
+  gridRow?: Properties['gridRow']
+  /**
+   * Web-only style property. Will be omitted on native.
+   */
+  gridRowEnd?: Properties['gridRowEnd']
+  /**
+   * Web-only style property. Will be omitted on native.
+   */
+  gridRowGap?: Properties['gridRowGap']
+  /**
+   * Web-only style property. Will be omitted on native.
+   */
+  gridRowStart?: Properties['gridRowStart']
+  /**
+   * Web-only style property. Will be omitted on native.
+   */
+  gridColumn?: Properties['gridColumn']
+  /**
+   * Web-only style property. Will be omitted on native.
+   */
+  gridColumnEnd?: Properties['gridColumnEnd']
+  /**
+   * Web-only style property. Will be omitted on native.
+   */
+  gridColumnGap?: Properties['gridColumnGap']
+  /**
+   * Web-only style property. Will be omitted on native.
+   */
+  gridColumnStart?: Properties['gridColumnStart']
+  /**
+   * Web-only style property. Will be omitted on native.
+   */
+  gridTemplateColumns?: Properties['gridTemplateColumns']
+  /**
+   * Web-only style property. Will be omitted on native.
+   */
+  gridTemplateAreas?: Properties['gridTemplateAreas']
+
+  /**
+   * Web-only style property. Will be omitted on native.
+   */
+  containerType?: Properties['containerType']
+  /**
+   * Web-only style property. Will be omitted on native.
+   */
+  blockSize?: SizeTokens | number
+  /**
+   * Web-only style property. Will be omitted on native.
+   */
+  inlineSize?: SizeTokens | number
+  /**
+   * Web-only style property. Will be omitted on native.
+   */
+  minBlockSize?: SizeTokens | number
+  /**
+   * Web-only style property. Will be omitted on native.
+   */
+  maxBlockSize?: SizeTokens | number
+  /**
+   * Web-only style property. Will be omitted on native.
+   */
+  objectFit?: Properties['objectFit']
+  /**
+   * Web-only style property. Will be omitted on native.
+   */
+  verticalAlign?: Properties['verticalAlign']
+  /**
+   * Web-only style property. Will be omitted on native.
+   */
+  minInlineSize?: SizeTokens | number
+  /**
+   * Web-only style property. Will be omitted on native.
+   */
+  maxInlineSize?: SizeTokens | number
+  /**
+   * Web-only style property. Will be omitted on native.
+   */
+  borderInlineColor?: ColorTokens
+  /**
+   * Web-only style property. Will be omitted on native.
+   */
+  borderInlineStartColor?: ColorTokens
+  /**
+   * Web-only style property. Will be omitted on native.
+   */
+  borderInlineEndColor?: ColorTokens
+
+  // TODO validate these are supported in react native, if so keep, if not deprecate like the above web-only deprecations
+  borderBlockWidth?: SpaceTokens | number
+  borderBlockStartWidth?: SpaceTokens | number
+  borderBlockEndWidth?: SpaceTokens | number
+  borderInlineWidth?: SpaceTokens | number
+  borderInlineStartWidth?: SpaceTokens | number
+  borderInlineEndWidth?: SpaceTokens | number
+  borderBlockStyle?: ViewStyle['borderStyle']
+  borderBlockStartStyle?: ViewStyle['borderStyle']
+  borderBlockEndStyle?: ViewStyle['borderStyle']
+  borderInlineStyle?: ViewStyle['borderStyle']
+  borderInlineStartStyle?: ViewStyle['borderStyle']
+  borderInlineEndStyle?: ViewStyle['borderStyle']
+  marginBlock?: SpaceTokens | number
+  marginBlockStart?: SpaceTokens | number
+  marginBlockEnd?: SpaceTokens | number
+  marginInline?: SpaceTokens | number
+  marginInlineStart?: SpaceTokens | number
+  marginInlineEnd?: SpaceTokens | number
+  paddingBlock?: SpaceTokens | number
+  paddingBlockStart?: SpaceTokens | number
+  paddingBlockEnd?: SpaceTokens | number
+  paddingInline?: SpaceTokens | number
+  paddingInlineStart?: SpaceTokens | number
+  paddingInlineEnd?: SpaceTokens | number
+  inset?: SpaceTokens | number
+  insetBlock?: SpaceTokens | number
+  insetBlockStart?: SpaceTokens | number
+  insetBlockEnd?: SpaceTokens | number
+  insetInline?: SpaceTokens | number
+  insetInlineStart?: SpaceTokens | number
+  insetInlineEnd?: SpaceTokens | number
+}
+
+export interface ExtendBaseStackProps {}
+export interface ExtendBaseTextProps {}
+
+interface ExtraBaseProps {
+  /**
+   * Transitions are defined using `createGui` typically in a gui.config.ts file.
+   * Pass a string transition name here and it uses an animation driver to execute it.
+   *
+   * See: https://gui.hanzo.ai/docs/core/animations
+   */
+  transition?: TransitionProp | null
+
+  /**
+   * Pass an array of strings containing the long style property names
+   * which will be exclusively transitioned.
+   */
+  animateOnly?: string[]
+
+  /**
+   * If you'd like this component to not attach to the nearest parent AnimatePresence,
+   * set this to `false` and it will pass through to the next animated child.
+   */
+  animatePresence?: boolean
+
+  /**
+   * Avoids as much work as possible and passes through the children with no changes.
+   * Advanced: Useful for adapting to other element when you want to avoid re-parenting.
+   */
+  passThrough?: boolean
+}
+
+interface ExtendedBaseProps
+  extends
+    TransformStyleProps,
+    ExtendBaseTextProps,
+    ExtendBaseStackProps,
+    ExtraStyleProps,
+    ExtraBaseProps {
+  display?: 'inherit' | 'none' | 'inline' | 'block' | 'contents' | 'flex' | 'inline-flex'
+  // extends RN's position to include 'fixed' (converted to 'absolute' on native)
+  position?: 'absolute' | 'relative' | 'fixed' | 'static' | 'sticky'
+}
+
+export interface StackStyleBase
+  extends Omit<ViewStyle, keyof ExtendedBaseProps | 'elevation'>, ExtendedBaseProps {}
+
+export interface TextStylePropsBase
+  extends Omit<RNTextStyle, keyof ExtendedBaseProps>, ExtendedBaseProps {
+  ellipsis?: boolean
+  textDecorationDistance?: number
+  textOverflow?: Properties['textOverflow']
+  whiteSpace?: Properties['whiteSpace']
+  wordWrap?: Properties['wordWrap']
+  /**
+   * CSS text-shadow string. Supports tokens: "2px 2px 4px $shadowColor"
+   * On native, only a single shadow is supported.
+   */
+  textShadow?: string
+}
+
+//
+// Stack
+//
+
+type LooseCombinedObjects<A extends object, B extends object> = A | B | (A & B)
+
+// v2: Removed A11yDeprecated - use web-standard props instead:
+// - accessibilityLabel → aria-label
+// - accessibilityRole → role
+// - accessibilityHint → aria-describedby
+// - accessibilityState → aria-disabled, aria-selected, aria-checked, aria-busy, aria-expanded
+// - accessibilityValue → aria-valuemin, aria-valuemax, aria-valuenow, aria-valuetext
+// - accessibilityElementsHidden → aria-hidden
+// - accessibilityViewIsModal → aria-modal
+// - accessibilityLiveRegion → aria-live
+// - accessible → tabIndex={0}
+// - focusable → tabIndex
+// - nativeID → id
+
+export interface StackNonStyleProps
+  extends
+    Omit<
+      ViewProps,
+      | 'hitSlop' //  we bring our own via Pressable in GuiComponentPropsBase
+      | 'pointerEvents'
+      | 'display'
+      | 'children'
+      | keyof GuiComponentPropsBaseBase
+      // these are added back in by core
+      | RNOnlyProps
+      | keyof ExtendBaseStackProps
+      | 'style'
+      // Event handlers that conflict between RN ViewProps and Web DivAttributes
+      | 'onFocus'
+      | 'onBlur'
+      | 'onPointerCancel'
+      | 'onPointerDown'
+      | 'onPointerMove'
+      | 'onPointerUp'
+    >,
+    ExtendBaseStackProps,
+    GuiComponentPropsBase {
+  // we allow either RN or web style props, of course only web css props only works on web
+  style?: StyleProp<LooseCombinedObjects<React.CSSProperties, ViewStyle>>
+}
+
+export type StackStyle = WithThemeShorthandsPseudosMedia<StackStyleBase>
+
+//
+// Text props
+//
+
+export interface TextNonStyleProps
+  extends
+    Omit<
+      ReactTextProps,
+      | 'children'
+      | keyof WebOnlyPressEvents
+      // these are added back in by core
+      | RNOnlyProps
+      | keyof ExtendBaseTextProps
+      | 'style'
+    >,
+    ExtendBaseTextProps,
+    GuiComponentPropsBase {
+  // we allow either RN or web style props, of course only web css props only works on web
+  style?: StyleProp<LooseCombinedObjects<React.CSSProperties, RNTextStyle>>
+}
+
+export type TextStyle = WithThemeShorthandsPseudosMedia<TextStylePropsBase>
+
+export type TextProps = TextNonStyleProps & TextStyle
+
+export interface ThemeableProps {
+  theme?: ThemeName | null
+  themeReset?: boolean
+  componentName?: string
+  debug?: DebugProp
+}
+
+export type StyleableOptions = {
+  disableTheme?: boolean
+  staticConfig?: Partial<StaticConfig>
+}
+
+export type Styleable<
+  Props,
+  Ref,
+  NonStyledProps,
+  BaseStyles extends object,
+  VariantProps,
+  ParentStaticProperties,
+> = <
+  CustomProps extends object | void = void,
+  MergedProps = CustomProps extends void
+    ? Props
+    : Omit<Props, keyof CustomProps> & CustomProps,
+  FunctionDef extends ForwardRefRenderFunction<Ref, MergedProps> =
+    ForwardRefRenderFunction<Ref, MergedProps>,
+>(
+  a: FunctionDef,
+  options?: StyleableOptions
+) => GuiComponent<
+  MergedProps,
+  Ref,
+  NonStyledProps & CustomProps,
+  BaseStyles,
+  VariantProps,
+  ParentStaticProperties
+>
+
+export type GetFinalProps<NonStyleProps, StylePropsBase, Variants> = Omit<
+  NonStyleProps,
+  keyof StylePropsBase | keyof Variants
+> &
+  (StylePropsBase extends object
+    ? WithThemeShorthandsPseudosMedia<StylePropsBase, Variants>
+    : {})
+
+export type GuiComponent<
+  Props = any,
+  Ref = any,
+  NonStyledProps = {},
+  BaseStyles extends object = {},
+  Variants = {},
+  ParentStaticProperties = {},
+> = ForwardRefExoticComponent<
+  (Props extends TamaDefer
+    ? GetFinalProps<NonStyledProps, BaseStyles, Variants>
+    : Props) &
+    RefAttributes<Ref>
+> &
+  StaticComponentObject<
+    Props,
+    Ref,
+    NonStyledProps,
+    BaseStyles,
+    Variants,
+    ParentStaticProperties
+  > &
+  Omit<ParentStaticProperties, 'staticConfig' | 'styleable'> & {
+    __tama: [Props, Ref, NonStyledProps, BaseStyles, Variants, ParentStaticProperties]
+  }
+
+export type InferGenericComponentProps<A> =
+  A extends ComponentType<infer Props>
+    ? Props
+    : A extends ForwardRefExoticComponent<infer P>
+      ? P
+      : A extends ReactComponentWithRef<infer P, any>
+        ? P
+        : A extends new (props: infer Props) => any
+          ? Props
+          : {}
+
+export type InferStyledProps<
+  A extends StylableComponent,
+  B extends StaticConfigPublic,
+> = A extends {
+  __tama: any
+}
+  ? GetProps<A>
+  : GetFinalProps<InferGenericComponentProps<A>, GetBaseStyles<{}, B>, {}>
+
+/** Like InferStyledProps but returns only style props (no non-styled props or variants). */
+export type InferStyleProps<
+  A extends StylableComponent,
+  B extends StaticConfigPublic,
+> = WithThemeShorthandsPseudosMedia<GetBaseStyles<A, B>, {}>
+
+export type GetProps<A extends StylableComponent> = A extends {
+  __tama: [
+    infer Props,
+    any,
+    infer NonStyledProps,
+    infer BaseStyles,
+    infer VariantProps,
+    any,
+  ]
+}
+  ? Props extends TamaDefer
+    ? GetFinalProps<NonStyledProps, BaseStyles, VariantProps>
+    : Props
+  : InferGenericComponentProps<A>
+
+export type GetNonStyledProps<A extends StylableComponent> = A extends {
+  __tama: [any, any, infer B, any, any, any]
+}
+  ? B
+  : GuiComponentPropsBaseBase & GetProps<A>
+
+export type GetBaseStyles<A, B> = A extends {
+  __tama: [any, any, any, infer C, any, any]
+}
+  ? C
+  : B extends { isText: true }
+    ? TextStylePropsBase
+    : B extends { isInput: true }
+      ? TextStylePropsBase
+      : StackStyleBase
+
+export type GetStyledVariants<A> = A extends {
+  __tama: [any, any, any, any, infer B, any]
+}
+  ? B
+  : {}
+
+export type GetStaticConfig<A, Extra = {}> = A extends {
+  __tama: [any, any, any, any, any, infer B]
+}
+  ? B & Extra
+  : Extra
+
+export type StaticComponentObject<
+  Props,
+  Ref,
+  NonStyledProps,
+  BaseStyles extends object,
+  VariantProps,
+  ParentStaticProperties,
+> = {
+  staticConfig: StaticConfig
+
+  /*
+   * If you want your HOC of a styled() component to also be able to be styled(), you need this to wrap it.
+   */
+  styleable: Styleable<
+    Props extends TamaDefer
+      ? GetFinalProps<NonStyledProps, BaseStyles, VariantProps>
+      : Props,
+    Ref,
+    NonStyledProps,
+    BaseStyles,
+    VariantProps,
+    ParentStaticProperties
+  >
+}
+
+export type GuiComponentExpectingVariants<
+  Props = {},
+  Variants extends object = {},
+> = GuiComponent<Props, any, any, any, Variants>
+
+export type GuiProviderProps = Omit<ThemeProviderProps, 'children'> & {
+  config?: GuiInternalConfig
+  disableInjectCSS?: boolean
+  children?: ReactNode
+  insets?: { top: number; right: number; bottom: number; left: number }
+}
+
+export type PropMappedValue = [string, any][] | undefined
+
+export type GetStyleState = {
+  style: TextStyle | null
+  usedKeys: Record<string, number>
+  classNames: ClassNamesObject
+  staticConfig: StaticConfig
+  theme: ThemeParsed
+  props: Record<string, any>
+  context?: ComponentContextI
+  viewProps: Record<string, any>
+  styleProps: SplitStyleProps
+  componentState: GuiComponentState
+  conf: GuiInternalConfig
+  avoidMergeTransform?: boolean
+  fontFamily?: string
+  debug?: DebugProp
+  flatTransforms?: Record<string, any>
+  // Track style values that override context props (for issues #3670, #3676)
+  overriddenContextProps?: Record<string, any>
+  // Track original token values (like '$8') before they get resolved to CSS vars
+  // This is used to preserve token strings in overriddenContextProps
+  originalContextPropValues?: Record<string, any>
+  // Transitions extracted from pseudo-style props (e.g., hoverStyle.transition)
+  pseudoTransitions?: PseudoTransitions | null
+  // Resolved animation driver (respects animatedBy prop)
+  animationDriver?: AnimationDriver | null
+}
+
+export type StyleResolver<Response = PropMappedValue> = (
+  key: string,
+  value: any,
+  props: SplitStyleProps,
+  state: GetStyleState,
+  parentVariantKey: string
+) => Response
+
+export type PropMapper = (
+  key: string,
+  value: any,
+  state: GetStyleState,
+  disabled: boolean,
+  map: (key: string, val: any, originalVal?: any) => void
+) => void
+
+export type GenericVariantDefinitions = {
+  [key: string]: {
+    [key: string]:
+      | ((a: any, b: any) => any)
+      | {
+          [key: string]: any
+        }
+  }
+}
+
+export type StaticConfigPublic = {
+  defaultProps?: Record<string, any>
+
+  /**
+   * (compiler) If you need to pass context or something, prevents from ever
+   * flattening. The 'jsx' option means it will never flatten. if you
+   * pass JSX as a children (if its purely string, it will still flatten).
+   */
+  neverFlatten?: boolean | 'jsx'
+
+  /**
+   * Adds support for text props and handles focus properly
+   */
+  isInput?: boolean
+
+  /**
+   * Determines ultimate output tag (Text vs View)
+   */
+  isText?: boolean
+
+  /**
+   * Which style keys are allowed to be extracted.
+   */
+  validStyles?: { [key: string]: boolean }
+
+  /**
+   * Accept Hanzo GUI tokens for these props (key for the prop key, val for the token category)
+   */
+  accept?: {
+    [key: string]: keyof Tokens | 'style' | 'textStyle'
+  }
+
+  /**
+   * (compiler) If these props are encountered, leave them un-extracted.
+   */
+  inlineProps?: Set<string>
+
+  /**
+   * (compiler) If not flattening, leave this prop as original value.
+   * Only applies to style attributes
+   */
+  inlineWhenUnflattened?: Set<string>
+
+  /**
+   * Auto-detected, but can override. Wraps children to space them on top
+   */
+  isZStack?: boolean
+
+  /**
+   * Auto-detect, but can override, passes styles properly to react-native-web
+   */
+  isReactNative?: boolean
+
+  /**
+   * By default if styled() doesn't recognize a parent Hanzo GUI component or specific react-native views,
+   * it will assume the passed in component only accepts style={} for react-native compatibility.
+   * Setting `acceptsClassName: true` indicates Hanzo GUI can pass in className props.
+   */
+  acceptsClassName?: boolean
+
+  /**
+   * memoizes component, rarely useful except mostly style components that don't take children
+   */
+  memo?: boolean
+}
+
+type StaticConfigBase = StaticConfigPublic & {
+  Component?: FunctionComponent<any> & StaticComponentObject<any, any, any, any, any, any>
+
+  variants?: GenericVariantDefinitions
+
+  context?: StyledContext
+
+  /**
+   * Used for applying sub theme style
+   */
+  componentName?: string
+
+  /**
+   * Merges into defaultProps later on, used internally only
+   */
+  defaultVariants?: { [key: string]: any }
+
+  /**
+   * Memoize the component
+   */
+  memo?: boolean
+
+  /**
+   * Used internally for knowing how to handle when a HOC is in-between styled()
+   */
+  isHOC?: boolean
+
+  // insanity, for styled(styled(styleable(styled())))
+  isStyledHOC?: boolean
+}
+
+export type StaticConfig = StaticConfigBase & {
+  parentStaticConfig?: StaticConfigBase
+}
+
+export type ViewStyleWithPseudos =
+  | TextStyle
+  | (TextStyle & {
+      hoverStyle?: TextStyle
+      pressStyle?: TextStyle
+      focusStyle?: TextStyle
+      focusWithinStyle?: TextStyle
+      focusVisibleStyle?: TextStyle
+      disabledStyle?: TextStyle
+    })
+
+/**
+ * --------------------------------------------
+ *   variants
+ * --------------------------------------------
+ */
+
+export type StylableComponent =
+  | GuiComponent
+  | ComponentType<any>
+  | ForwardRefExoticComponent<any>
+  | ReactComponentWithRef<any, any>
+  | (new (props: any) => any)
+
+export type SpreadKeys =
+  | '...fontSize'
+  | '...fontStyle'
+  | '...fontTransform'
+  | '...lineHeight'
+  | '...letterSpacing'
+  | '...size'
+  | '...space'
+  | '...color'
+  | '...zIndex'
+  | '...theme'
+  | '...radius'
+
+export type VariantDefinitions<
+  Parent extends StylableComponent = GuiComponent,
+  StaticConfig extends StaticConfigPublic = Parent extends {
+    __tama: [any, any, any, any, any, infer S]
+  }
+    ? S
+    : {},
+  MyProps extends object = Partial<
+    GetVariantProps<
+      Parent,
+      StaticConfig['isText'] extends true
+        ? true
+        : StaticConfig['isInput'] extends true
+          ? true
+          : false
+    >
+  >,
+  Val = any,
+> = VariantDefinitionFromProps<MyProps, Val> & {
+  _isEmpty?: 1
+}
+
+export type GetVariantProps<
+  A extends StylableComponent,
+  IsText extends boolean | undefined,
+> = A extends {
+  __tama: [
+    infer Props,
+    any,
+    infer NonStyledProps,
+    infer BaseStyles,
+    infer VariantProps,
+    any,
+  ]
+}
+  ? Props extends TamaDefer
+    ? GetFinalProps<NonStyledProps, BaseStyles, VariantProps>
+    : Props
+  : WithThemeShorthandsPseudosMedia<
+      IsText extends true ? TextStylePropsBase : StackStyleBase
+    >
+
+export type VariantDefinitionFromProps<MyProps, Val> = MyProps extends object
+  ? {
+      [propName: string]:
+        | VariantSpreadFunction<MyProps, Val>
+        | ({
+            [Key in SpreadKeys]?: Key extends '...fontSize'
+              ? FontSizeVariantSpreadFunction<MyProps>
+              : Key extends '...size'
+                ? SizeVariantSpreadFunction<MyProps>
+                : Key extends '...space'
+                  ? SpaceVariantSpreadFunction<MyProps>
+                  : Key extends '...color'
+                    ? ColorVariantSpreadFunction<MyProps>
+                    : Key extends '...lineHeight'
+                      ? FontLineHeightVariantSpreadFunction<MyProps>
+                      : Key extends '...fontTransform'
+                        ? FontTransformVariantSpreadFunction<MyProps>
+                        : Key extends '...fontStyle'
+                          ? FontStyleVariantSpreadFunction<MyProps>
+                          : Key extends '...letterSpacing'
+                            ? FontLetterSpacingVariantSpreadFunction<MyProps>
+                            : Key extends '...zIndex'
+                              ? ZIndexVariantSpreadFunction<MyProps>
+                              : Key extends '...radius'
+                                ? RadiusVariantSpreadFunction<MyProps>
+                                : Key extends '...theme'
+                                  ? ThemeVariantSpreadFunction<MyProps>
+                                  : never
+          } & {
+            [Key in string | number | 'true' | 'false']?:
+              | MyProps
+              | VariantSpreadFunction<MyProps, Val>
+          } & {
+            [Key in VariantTypeKeys]?: Key extends ':number'
+              ? VariantSpreadFunction<MyProps, number>
+              : Key extends ':boolean'
+                ? VariantSpreadFunction<MyProps, boolean>
+                : Key extends ':string'
+                  ? VariantSpreadFunction<MyProps, string>
+                  : never
+          })
+    }
+  : {}
+
+export type GenericStackVariants = VariantDefinitionFromProps<
+  StackNonStyleProps & StackStyle,
+  any
+>
+export type GenericTextVariants = VariantDefinitionFromProps<TextProps, any>
+
+export type VariantSpreadExtras<Props> = {
+  fonts: GuiConfig['fonts']
+  tokens: TokensParsed
+  theme: Themes extends { [key: string]: infer B } ? B : unknown
+  props: Props
+  fontFamily?: FontFamilyTokens
+  font?: Font
+}
+
+type PropLike = { [key: string]: any }
+
+export type VariantSpreadFunction<Props extends PropLike, Val = any> = (
+  val: Val,
+  config: VariantSpreadExtras<Props>
+) =>
+  | {
+      [Key in keyof Props]: Props[Key] | Variable | VariableVal
+    }
+  | null
+  | undefined
+
+export type VariantTypeKeys = ':string' | ':boolean' | ':number'
+
+export type GetVariantValues<Key> = Key extends `...${infer VariantSpread}`
+  ? ThemeValueByCategory<VariantSpread>
+  : Key extends 'true' | 'false'
+    ? boolean
+    : Key extends ':string'
+      ? string
+      : Key extends ':boolean'
+        ? boolean
+        : Key extends ':number'
+          ? number
+          : Key
+
+export type FontSizeVariantSpreadFunction<A extends PropLike> = VariantSpreadFunction<
+  A,
+  FontSizeTokens
+>
+export type SizeVariantSpreadFunction<A extends PropLike> = VariantSpreadFunction<
+  A,
+  SizeTokens
+>
+export type SpaceVariantSpreadFunction<A extends PropLike> = VariantSpreadFunction<
+  A,
+  SpaceTokens
+>
+export type ColorVariantSpreadFunction<A extends PropLike> = VariantSpreadFunction<
+  A,
+  ColorTokens
+>
+export type FontLineHeightVariantSpreadFunction<A extends PropLike> =
+  VariantSpreadFunction<A, FontLineHeightTokens>
+export type FontLetterSpacingVariantSpreadFunction<A extends PropLike> =
+  VariantSpreadFunction<A, FontLetterSpacingTokens>
+export type FontStyleVariantSpreadFunction<A extends PropLike> = VariantSpreadFunction<
+  A,
+  FontStyleTokens
+>
+export type FontTransformVariantSpreadFunction<A extends PropLike> =
+  VariantSpreadFunction<A, FontTransformTokens>
+export type ZIndexVariantSpreadFunction<A extends PropLike> = VariantSpreadFunction<
+  A,
+  ZIndexTokens
+>
+export type RadiusVariantSpreadFunction<A extends PropLike> = VariantSpreadFunction<
+  A,
+  RadiusTokens
+>
+export type ThemeVariantSpreadFunction<A extends PropLike> = VariantSpreadFunction<
+  A,
+  ThemeTokens
+>
+
+/**
+ * --------------------------------------------
+ *   end variants
+ * --------------------------------------------
+ */
+
+export type ResolveVariableAs =
+  | 'auto'
+  | 'value'
+  | 'variable'
+  | 'none'
+  | 'web'
+  | 'except-theme'
+
+export type SplitStyleProps = {
+  styledContext?: Record<string, any>
+  mediaState?: Record<string, boolean>
+  noClass?: boolean
+  noExpand?: boolean
+  noNormalize?: boolean | 'values'
+  noSkip?: boolean
+  noMergeStyle?: boolean
+  resolveValues?: ResolveVariableAs
+  disableExpandShorthands?: boolean
+  fallbackProps?: Record<string, any>
+  hasTextAncestor?: boolean
+  // for animations
+  willBeAnimated?: boolean // we need to track media queries even before animation
+  isAnimated: boolean
+  isExiting?: boolean
+  exitVariant?: string
+  enterVariant?: string
+}
+
+// Presence
+
+export interface PresenceContextProps {
+  id: string
+  isPresent: boolean
+  register: (id: string) => () => void
+  onExitComplete?: (id: string) => void
+  initial?: false | string | string[]
+  custom?: any
+  exitVariant?: string | null
+  enterVariant?: string | null
+  enterExitVariant?: string | null
+}
+
+type SafeToRemoveCallback = () => void
+type AlwaysPresent = [true, null, null]
+type Present = [true, undefined, PresenceContextProps]
+type NotPresent = [false, SafeToRemoveCallback, PresenceContextProps]
+
+export type UsePresenceResult = AlwaysPresent | Present | NotPresent
+
+// Animations:
+
+type AnimationConfig = {
+  [key: string]: any
+}
+
+// includes a very limited adapter between various impls for number => style
+// this is useful only in limited scenarios like `Sheet`, but necessary in those cases
+// TODO: make css driver compatible with this?
+
+export type AnimatedNumberStrategy =
+  // only values shared between reanimated/react-native for now
+  | {
+      type: 'spring'
+      stiffness?: number
+      damping?: number
+      mass?: number
+      overshootClamping?: boolean
+      restSpeedThreshold?: number
+      restDisplacementThreshold?: number
+    }
+  | { type: 'timing'; duration: number }
+  | { type: 'direct' }
+
+export type UniversalAnimatedNumber<A> = {
+  getInstance(): A
+  getValue(): number
+  setValue(next: number, config?: AnimatedNumberStrategy, onFinished?: () => void): void
+  stop(): void
+}
+
+export type UseAnimatedNumberReaction<
+  V extends UniversalAnimatedNumber<any> = UniversalAnimatedNumber<any>,
+> = (
+  opts: {
+    value: V
+    hostRef: RefObject<GuiElement>
+  },
+  onValue: (current: number) => void
+) => void
+
+export type UseAnimatedNumberStyle<
+  V extends UniversalAnimatedNumber<any> = UniversalAnimatedNumber<any>,
+> = (val: V, getStyle: (current: any) => any) => any
+
+export type UseAnimatedNumber<
+  N extends UniversalAnimatedNumber<any> = UniversalAnimatedNumber<any>,
+> = (initial: number) => N
+
+export type AnimationDriver<A extends AnimationConfig = AnimationConfig> = {
+  isReactNative?: boolean
+  /** What style format the driver expects as input: 'css' (CSS variables) or 'value' (resolved values) */
+  inputStyle?: 'css' | 'value'
+  /** How the driver outputs styles: 'css' (className-based) or 'inline' (style object) */
+  outputStyle?: 'css' | 'inline'
+  needsCustomComponent?: boolean
+  avoidReRenders?: boolean
+  onMount?: () => void
+  /** When true, this is a stub driver with no real animation support */
+  isStub?: boolean
+  useAnimations: UseAnimationHook
+  usePresence: () => UsePresenceResult
+  ResetPresence: (props: {
+    children?: React.ReactNode
+    disabled?: boolean
+  }) => React.ReactNode
+  useAnimatedNumber: UseAnimatedNumber
+  useAnimatedNumberStyle: UseAnimatedNumberStyle
+  useAnimatedNumberReaction: UseAnimatedNumberReaction
+  animations: A
+  View?: any
+  Text?: any
+}
+
+export type UseAnimationProps = GuiComponentPropsBase & Record<string, any>
+
+type UseStyleListener = (
+  nextStyle: Record<string, unknown>,
+  effectiveTransition?: TransitionProp | null
+) => void
+export type UseStyleEmitter = (cb: UseStyleListener) => void
+
+export type UseAnimationHook = (props: {
+  style: Record<string, any>
+  props: Record<string, any>
+  presence?: UsePresenceResult | null
+  staticConfig: StaticConfig
+  styleProps: SplitStyleProps
+  componentState: GuiComponentState
+  useStyleEmitter?: UseStyleEmitter
+  theme: ThemeParsed
+  themeName: string
+  pseudos: WithPseudoProps<ViewStyle> | null
+  stateRef: { current: GuiComponentStateRef }
+  onDidAnimate?: any
+  delay?: number
+}) => null | {
+  style?: StackStyleBase | StackStyleBase[]
+  className?: string
+  ref?: any
+}
+
+export type GestureReponderEvent =
+  Exclude<View['props']['onResponderMove'], void> extends (event: infer Event) => void
+    ? Event
+    : never
+
+export type RulesToInsert = Record<string, StyleObject>
+
+export type GetStyleResult = {
+  pseudos?: PseudoStyles | null
+  style: ViewStyle | null
+  classNames: ClassNamesObject
+  rulesToInsert: RulesToInsert
+  viewProps: (StackNonStyleProps & StackStyle) & Record<string, any>
+  fontFamily: string | undefined
+  space?: any // SpaceTokens?
+  hasMedia: boolean | Set<string>
+  dynamicThemeAccess?: boolean
+  pseudoGroups?: Set<string>
+  mediaGroups?: Set<string>
+  // Style values that override context props (for issues #3670, #3676)
+  overriddenContextProps?: Record<string, any>
+  // Transitions extracted from pseudo-style props (e.g., hoverStyle.transition)
+  pseudoTransitions?: PseudoTransitions | null
+  // Effective transition to use (accounts for entering pseudo states)
+  effectiveTransition?: TransitionProp | null
+}
+
+export type ClassNamesObject = Record<string, string>
+
+export type ModifyGuiComponentStyleProps<
+  Comp extends GuiComponent,
+  ChangedProps extends object,
+> =
+  Comp extends GuiComponent<infer A, infer B, infer C, infer D, infer E>
+    ? A extends object
+      ? GuiComponent<Omit<A, keyof ChangedProps> & ChangedProps, B, C, D, E>
+      : never
+    : never
+
+/**
+ * Narrow copied from ts-toolbelt
+ * https://github.com/millsp/ts-toolbelt/blob/master/sources/Function/Narrow.ts
+ */
+export type Try<A1, A2, Catch = never> = A1 extends A2 ? A1 : Catch
+
+type Narrowable = string | number | bigint | boolean
+
+type NarrowRaw<A> =
+  | (A extends [] ? [] : never)
+  | (A extends Narrowable ? A : never)
+  | {
+      [K in keyof A]: A[K] extends Function ? A[K] : NarrowRaw<A[K]>
+    }
+
+export type Narrow<A> = Try<A, [], NarrowRaw<A>>
+
+/**
+ * `StyleProp` copied from React Native:
+ *  Exported to fix https://github.com/hanzoai/gui/issues/1258
+ */
+
+export type Falsy = undefined | null | false | ''
+export interface RecursiveArray<T> extends Array<
+  T | ReadonlyArray<T> | RecursiveArray<T>
+> {}
+/** Keep a brand of 'T' so that calls to `StyleSheet.flatten` can take `RegisteredStyle<T>` and return `T`. */
+
+export type RegisteredStyle<T> = number & { __registeredStyleBrand: T }
+
+export type StyleProp<T> =
+  | T
+  | RegisteredStyle<T>
+  | RecursiveArray<T | RegisteredStyle<T> | Falsy>
+  | Falsy
+
+export type FillInFont<A extends GenericFont, DefaultKeys extends string | number> = {
+  family: string
+  lineHeight: FillInFontValues<A, 'lineHeight', DefaultKeys>
+  weight: FillInFontValues<A, 'weight', DefaultKeys>
+  letterSpacing: FillInFontValues<A, 'letterSpacing', DefaultKeys>
+  size: FillInFontValues<A, 'size', DefaultKeys>
+  style: FillInFontValues<A, 'style', DefaultKeys>
+  transform: FillInFontValues<A, 'transform', DefaultKeys>
+  color: FillInFontValues<A, 'color', DefaultKeys>
+  face: Partial<A['face']>
+}
+
+type FillInFontValues<
+  A extends GenericFont,
+  K extends keyof A,
+  DefaultKeys extends string | number,
+> = keyof A[K] extends GenericFontKey
+  ? {
+      [Key in DefaultKeys]: A[K][any]
+    }
+  : {
+      [Key in keyof A[K] | DefaultKeys]: Key extends keyof A[K]
+        ? Exclude<A[K][Key], Variable>
+        : any
+    }
+
+export type ThemesLikeObject = Record<string, Record<string, string>>
+
+// dedupe themes to avoid duplicate CSS generation
+export type DedupedTheme = {
+  names: string[]
+  theme: ThemeParsed
+}
+
+export type DedupedThemes = DedupedTheme[]
+
+export type UseMediaState = {
+  [key in MediaQueryKey]: boolean
+}
+
+export type TamaDefer = { __tamaDefer: true }