@hanzogui/web 2.0.0

package/src/helpers/parseNativeStyle.ts

@@ -0,0 +1,193 @@
+/**
+ * parses CSS string values into RN object format on native,
+ * preserving DynamicColorIOS objects from the token map.
+ *
+ * supports: backgroundImage (linear-gradient), boxShadow, textShadow
+ * filter has no RN object equivalent, returns undefined (falls back to string)
+ *
+ * only called inside process.env.HANZO_GUI_TARGET === 'native' checks,
+ * so this code is dead-code-eliminated on web builds.
+ */
+
+type TokenMap = Map<string, any>
+
+export function parseNativeStyle(
+  key: string,
+  cssString: string,
+  tokenMap?: TokenMap
+): any | undefined {
+  switch (key) {
+    case 'backgroundImage':
+      return parseBackgroundImage(cssString, tokenMap)
+    case 'boxShadow':
+      return parseBoxShadow(cssString, tokenMap)
+    case 'textShadow':
+      return parseTextShadow(cssString, tokenMap)
+    default:
+      return undefined
+  }
+}
+
+function resolveColor(raw: string, tokenMap?: TokenMap): any {
+  if (tokenMap && tokenMap.has(raw)) {
+    return tokenMap.get(raw)
+  }
+  return raw
+}
+
+// parse "linear-gradient(direction, color1 pos1, color2 pos2, ...)"
+function parseBackgroundImage(css: string, tokenMap?: TokenMap): any[] | undefined {
+  const match = css.match(/^linear-gradient\((.+)\)$/s)
+  if (!match) return undefined
+
+  const inner = match[1]
+  // split on commas that are not inside parentheses
+  const parts = splitOutsideParens(inner)
+  if (parts.length < 2) return undefined
+
+  let direction: string | undefined
+  let startIdx = 0
+
+  const firstPart = parts[0].trim()
+  // check if first part is a direction (starts with "to " or ends with "deg/rad/turn/grad")
+  if (firstPart.startsWith('to ') || /^\d+(\.\d+)?(deg|rad|turn|grad)$/.test(firstPart)) {
+    direction = firstPart
+    startIdx = 1
+  }
+
+  const colorStops: any[] = []
+  for (let i = startIdx; i < parts.length; i++) {
+    const stopParts = parts[i].trim().match(/\S+\([^)]*\)|\S+/g)
+    if (!stopParts) continue
+    const colorRaw = stopParts[0]
+    const color = resolveColor(colorRaw, tokenMap)
+    const positions = stopParts.slice(1)
+    const stop: any = { color }
+    if (positions.length > 0) {
+      stop.positions = positions
+    }
+    colorStops.push(stop)
+  }
+
+  const gradient: any = {
+    type: 'linear-gradient',
+    colorStops,
+  }
+  if (direction) {
+    gradient.direction = direction
+  }
+
+  return [gradient]
+}
+
+// parse "offsetX offsetY [blur [spread]] [color]" (comma-separated for multiple)
+function parseBoxShadow(css: string, tokenMap?: TokenMap): any[] | undefined {
+  // split on commas for multiple shadows
+  const shadowStrings = splitOutsideParens(css)
+  const shadows: any[] = []
+
+  for (const raw of shadowStrings) {
+    const s = raw.trim()
+    if (!s) continue
+
+    const tokens = s.split(/\s+/)
+    if (tokens.length < 2) return undefined
+
+    let startIdx = 0
+    let inset = false
+    if (tokens[0] === 'inset') {
+      inset = true
+      startIdx = 1
+    }
+
+    // find where the color starts - numbers/dimensions come first
+    const numericParts: number[] = []
+    let colorParts: string[] = []
+
+    for (let i = startIdx; i < tokens.length; i++) {
+      const n = parseDimension(tokens[i])
+      if (n !== undefined) {
+        numericParts.push(n)
+      } else {
+        // rest is color (could be "rgba(..." which was split, so rejoin)
+        colorParts = tokens.slice(i)
+        break
+      }
+    }
+
+    if (numericParts.length < 2) return undefined
+
+    const shadow: any = {
+      offsetX: numericParts[0],
+      offsetY: numericParts[1],
+    }
+    if (inset) {
+      shadow.inset = true
+    }
+    if (numericParts.length >= 3) {
+      shadow.blurRadius = numericParts[2]
+    }
+    if (numericParts.length >= 4) {
+      shadow.spreadDistance = numericParts[3]
+    }
+    if (colorParts.length > 0) {
+      const colorStr = colorParts.join(' ')
+      shadow.color = resolveColor(colorStr, tokenMap)
+    }
+
+    shadows.push(shadow)
+  }
+
+  return shadows.length > 0 ? shadows : undefined
+}
+
+// parse "offsetX offsetY blur color"
+function parseTextShadow(css: string, tokenMap?: TokenMap): [string, any][] | undefined {
+  const tokens = css.trim().split(/\s+/)
+  if (tokens.length < 3) return undefined
+
+  const offsetX = parseDimension(tokens[0])
+  const offsetY = parseDimension(tokens[1])
+  const blur = parseDimension(tokens[2])
+
+  if (offsetX === undefined || offsetY === undefined || blur === undefined) {
+    return undefined
+  }
+
+  const result: [string, any][] = [
+    ['textShadowOffset', { width: offsetX, height: offsetY }],
+    ['textShadowRadius', blur],
+  ]
+
+  if (tokens.length >= 4) {
+    const colorStr = tokens.slice(3).join(' ')
+    result.push(['textShadowColor', resolveColor(colorStr, tokenMap)])
+  }
+
+  return result
+}
+
+function parseDimension(s: string): number | undefined {
+  // strip px/dp suffix
+  const cleaned = s.replace(/px$|dp$/, '')
+  const n = Number(cleaned)
+  return Number.isFinite(n) ? n : undefined
+}
+
+// split a string on commas that are not inside parentheses
+function splitOutsideParens(s: string): string[] {
+  const parts: string[] = []
+  let depth = 0
+  let start = 0
+  for (let i = 0; i < s.length; i++) {
+    const ch = s.charCodeAt(i)
+    if (ch === 40 /* ( */) depth++
+    else if (ch === 41 /* ) */) depth--
+    else if (ch === 44 /* , */ && depth === 0) {
+      parts.push(s.slice(start, i))
+      start = i + 1
+    }
+  }
+  parts.push(s.slice(start))
+  return parts
+}

package/src/helpers/parseOutlineShorthand.native.ts

@@ -0,0 +1,62 @@
+import type { PropMappedValue } from '../types'
+
+// outline style keywords
+const outlineStyles = new Set([
+  'solid',
+  'dashed',
+  'dotted',
+  'double',
+  'groove',
+  'ridge',
+  'inset',
+  'outset',
+  'none',
+  'hidden',
+])
+
+// parses CSS outline shorthand: "<width> <style> <color>"
+// components can appear in any order, all are optional
+// on native, expands directly to individual outline properties
+export function parseOutlineShorthand(value: string): PropMappedValue | undefined {
+  if (value === 'none' || value === '0') {
+    return [
+      ['outlineWidth', 0],
+      ['outlineStyle', 'none'],
+    ]
+  }
+
+  const parts = value.trim().split(/\s+/)
+  let outlineWidth: string | number | undefined
+  let outlineStyle: string | undefined
+  let outlineColor: string | undefined
+
+  for (const part of parts) {
+    // check if it's an outline style keyword
+    if (outlineStyles.has(part)) {
+      outlineStyle = part
+    }
+    // check if it's a length (number or ends with px/em/rem/etc)
+    else if (/^[\d.]+(?:px|em|rem|%|pt|vw|vh)?$/.test(part)) {
+      const num = parseFloat(part)
+      outlineWidth = part.endsWith('px') || !part.match(/[a-z%]/i) ? num : part
+    }
+    // otherwise assume it's a color
+    else {
+      outlineColor = part
+    }
+  }
+
+  const result: PropMappedValue = []
+
+  if (outlineWidth !== undefined) {
+    result.push(['outlineWidth', outlineWidth])
+  }
+  if (outlineStyle !== undefined) {
+    result.push(['outlineStyle', outlineStyle])
+  }
+  if (outlineColor !== undefined) {
+    result.push(['outlineColor', outlineColor])
+  }
+
+  return result.length > 0 ? result : undefined
+}

package/src/helpers/parseOutlineShorthand.ts

@@ -0,0 +1,6 @@
+import type { PropMappedValue } from '../types'
+
+// no-op on web - outline shorthand is passed through as CSS
+export function parseOutlineShorthand(_value: string): PropMappedValue | undefined {
+  return undefined
+}

package/src/helpers/platformResolveValue.native.ts

@@ -0,0 +1,72 @@
+import type { GetStyleState, SplitStyleProps } from '../types'
+import { getTokenForKey } from './getTokenForKey'
+import { parseNativeStyle } from './parseNativeStyle'
+
+const tokenPattern = /(\$[\w.-]+)/g
+
+// keys that need native object parsing (DynamicColorIOS support)
+const nativeParseKeys: Record<string, boolean> = {
+  backgroundImage: true,
+  boxShadow: true,
+  textShadow: true,
+}
+
+function replaceTokens(
+  value: string,
+  styleProps: SplitStyleProps,
+  styleState: Partial<GetStyleState>
+): string {
+  return value.replace(tokenPattern, (t) => {
+    let r = getTokenForKey('size', t, styleProps, styleState)
+    if (r == null) {
+      r = getTokenForKey('color', t, styleProps, styleState)
+    }
+    return r != null ? String(r) : t
+  })
+}
+
+/**
+ * native: resolves embedded $tokens, with DynamicColorIOS placeholder
+ * support for boxShadow/textShadow/backgroundImage.
+ */
+export function platformResolveValue(
+  key: string,
+  value: string,
+  styleProps: SplitStyleProps,
+  styleState: Partial<GetStyleState>
+): any {
+  if (!nativeParseKeys[key]) {
+    return replaceTokens(value, styleProps, styleState)
+  }
+
+  // for backgroundImage (gradients), force 'web' resolution to avoid DynamicColorIOS
+  // gradients don't support dynamic color updates - RN resolves colors once at render time
+  // so we need plain values and must let the component re-render on scheme changes
+  const effectiveStyleProps =
+    key === 'backgroundImage'
+      ? { ...styleProps, resolveValues: 'web' as const }
+      : styleProps
+
+  // preserve DynamicColorIOS objects through parsing (for boxShadow/textShadow)
+  const tokenMap = new Map<string, any>()
+  let placeholderIdx = 0
+  const withPlaceholders = value.replace(tokenPattern, (t) => {
+    let r = getTokenForKey('size', t, effectiveStyleProps, styleState)
+    if (r == null) {
+      r = getTokenForKey('color', t, effectiveStyleProps, styleState)
+    }
+    if (r == null) return t
+    if (typeof r !== 'string' && typeof r !== 'number') {
+      const placeholder = `__tk${placeholderIdx++}__`
+      tokenMap.set(placeholder, r)
+      return placeholder
+    }
+    return String(r)
+  })
+
+  const parsed = parseNativeStyle(key, withPlaceholders, tokenMap)
+  if (parsed) return parsed
+
+  // fallback to plain string resolution
+  return replaceTokens(value, styleProps, styleState)
+}

package/src/helpers/platformResolveValue.ts

@@ -0,0 +1,22 @@
+import type { GetStyleState, SplitStyleProps } from '../types'
+import { getTokenForKey } from './getTokenForKey'
+
+const tokenPattern = /(\$[\w.-]+)/g
+
+/**
+ * web: resolves embedded $tokens in compound CSS strings via simple regex replacement.
+ */
+export function platformResolveValue(
+  _key: string,
+  value: string,
+  styleProps: SplitStyleProps,
+  styleState: Partial<GetStyleState>
+): string {
+  return value.replace(tokenPattern, (t) => {
+    let r = getTokenForKey('size', t, styleProps, styleState)
+    if (r == null) {
+      r = getTokenForKey('color', t, styleProps, styleState)
+    }
+    return r != null ? String(r) : t
+  })
+}

package/src/helpers/pointerEvents.native.ts

@@ -0,0 +1,143 @@
+/**
+ * Native pointer events - maps pointer events to touch/responder events
+ *
+ * Implements setPointerCapture/releasePointerCapture on the event target
+ * to match web API for drag scenarios.
+ */
+import { useRef } from 'react'
+import { composeEventHandlers } from '@hanzogui/helpers'
+
+export function usePointerEvents(props: any, viewProps: any) {
+  const {
+    onPointerDown,
+    onPointerUp,
+    onPointerMove,
+    onPointerCancel,
+    onPointerEnter,
+    onPointerLeave,
+  } = props
+
+  const hasPointerEvents =
+    onPointerDown ||
+    onPointerUp ||
+    onPointerMove ||
+    onPointerCancel ||
+    onPointerEnter ||
+    onPointerLeave
+
+  // track if pointer is currently inside bounds (for enter/leave)
+  const isInsideRef = useRef(false)
+  const layoutRef = useRef({ width: 0, height: 0 })
+  // track if pointer is captured (for move events outside bounds)
+  const isCapturedRef = useRef(false)
+
+  if (!hasPointerEvents) return
+
+  // create normalized event with setPointerCapture support
+  const createNormalizedEvent = (e: any) => {
+    const touch = e.nativeEvent
+    const normalized: any = {
+      ...e,
+      clientX: touch.pageX,
+      clientY: touch.pageY,
+      pageX: touch.pageX,
+      pageY: touch.pageY,
+      offsetX: touch.locationX,
+      offsetY: touch.locationY,
+      pointerType: 'touch' as const,
+      pointerId: touch.identifier ?? 0,
+      nativeEvent: touch,
+      target: {
+        setPointerCapture: (_pointerId: number) => {
+          isCapturedRef.current = true
+        },
+        releasePointerCapture: (_pointerId: number) => {
+          isCapturedRef.current = false
+        },
+      },
+    }
+    return normalized
+  }
+
+  // pointer down
+  if (onPointerDown) {
+    viewProps.onTouchStart = composeEventHandlers(viewProps.onTouchStart, (e: any) => {
+      onPointerDown(createNormalizedEvent(e))
+    })
+  }
+
+  // pointer up
+  if (onPointerUp) {
+    viewProps.onTouchEnd = composeEventHandlers(viewProps.onTouchEnd, (e: any) => {
+      isCapturedRef.current = false // auto-release on up
+      onPointerUp(createNormalizedEvent(e))
+    })
+  }
+
+  // pointer move - fires for all moves when captured, otherwise only in bounds
+  if (onPointerMove) {
+    viewProps.onTouchMove = composeEventHandlers(viewProps.onTouchMove, (e: any) => {
+      const { locationX, locationY } = e.nativeEvent
+      const { width, height } = layoutRef.current
+      const isInBounds =
+        locationX >= 0 && locationX <= width && locationY >= 0 && locationY <= height
+
+      // fire if captured OR in bounds (matches web behavior)
+      if (isCapturedRef.current || isInBounds) {
+        onPointerMove(createNormalizedEvent(e))
+      }
+    })
+  }
+
+  // pointer cancel
+  if (onPointerCancel) {
+    viewProps.onTouchCancel = composeEventHandlers(viewProps.onTouchCancel, (e: any) => {
+      isCapturedRef.current = false
+      onPointerCancel(createNormalizedEvent(e))
+    })
+  }
+
+  // enter/leave and layout tracking
+  if (onPointerEnter || onPointerLeave || onPointerMove) {
+    // track layout for bounds checking
+    viewProps.onLayout = composeEventHandlers(viewProps.onLayout, (e: any) => {
+      layoutRef.current = {
+        width: e.nativeEvent.layout.width,
+        height: e.nativeEvent.layout.height,
+      }
+    })
+  }
+
+  // enter on touch start if in bounds
+  if (onPointerEnter) {
+    viewProps.onTouchStart = composeEventHandlers(viewProps.onTouchStart, (e: any) => {
+      const { locationX, locationY } = e.nativeEvent
+      const { width, height } = layoutRef.current
+      if (locationX >= 0 && locationX <= width && locationY >= 0 && locationY <= height) {
+        isInsideRef.current = true
+        onPointerEnter(createNormalizedEvent(e))
+      }
+    })
+  }
+
+  // leave when touch moves outside or ends
+  if (onPointerLeave) {
+    viewProps.onTouchMove = composeEventHandlers(viewProps.onTouchMove, (e: any) => {
+      const { locationX, locationY } = e.nativeEvent
+      const { width, height } = layoutRef.current
+      const isInside =
+        locationX >= 0 && locationX <= width && locationY >= 0 && locationY <= height
+      if (isInsideRef.current && !isInside) {
+        isInsideRef.current = false
+        onPointerLeave(createNormalizedEvent(e))
+      }
+    })
+
+    viewProps.onTouchEnd = composeEventHandlers(viewProps.onTouchEnd, (e: any) => {
+      if (isInsideRef.current) {
+        isInsideRef.current = false
+        onPointerLeave(createNormalizedEvent(e))
+      }
+    })
+  }
+}

package/src/helpers/pointerEvents.ts

@@ -0,0 +1,9 @@
+/**
+ * Web pointer events - no-op, pointer events work natively on web
+ *
+ * For drag scenarios, users should call e.target.setPointerCapture(e.pointerId)
+ * in their onPointerDown handler to receive move events outside element bounds.
+ */
+export function usePointerEvents(_props: any, _viewProps: any) {
+  // pointer events pass through directly on web
+}