@ccheever/exact-renderer 0.1.0

package/src/web-primitives.ts

@@ -0,0 +1,1654 @@
+/**
+ * Web-Aware Primitive Components
+ *
+ * When Exact runs on web, React DOM is the renderer — not the Exact custom
+ * reconciler.  React DOM doesn't know how to handle custom element names like
+ * `View` or `Pressable`, so they end up as inert, unstyled DOM nodes.
+ *
+ * This module wraps each React Native-style primitive in a thin function
+ * component that:
+ *   - On web → renders a standard HTML element (`div`, `span`, `input`, `img`)
+ *     with the appropriate RN-like defaults (flex column, box-sizing, etc.)
+ *     and maps RN props (onPress, onChangeText) to DOM equivalents.
+ *   - On native → renders the raw string tag (`'View'`, `'Text'`, etc.) so
+ *     that the Exact custom reconciler handles it through the normal tag-map
+ *     and binary protocol path.
+ *
+ * The detection is a one-time check at module init: if `document` exists we
+ * are on web; otherwise we are on native.
+ */
+
+import React from 'react';
+
+import { colorToRgba, parseColor } from '@exact/core/style/color';
+
+import { cssTransform, cssTransition } from './dom-mirror.js';
+import type {
+  ContainerProps,
+  TextElementProps,
+  PressableElementProps,
+  PressEvent,
+  ScrollContainerProps,
+  TextInputProps,
+  RNImageProps,
+  ToggleProps,
+  SvgProps,
+  ImageObjectFit,
+  ImageSource,
+} from './types.js';
+import {
+  normalizeImageLoading,
+  resolveImagePlaceholderForDOM,
+  resolveImageSourceForDOM,
+  resolveThemeAwareImageSource,
+  warnIfImageMissingAlt,
+} from './image-source.js';
+import {
+  coerceImageSourceToSvgSource,
+  filterSvgColors,
+  getDefaultSvgPixelDensity,
+  isInlineSvgSource,
+  resolveSvgSourceForDOM,
+  resolveSvgSourceForFetch,
+} from './svg-source.js';
+import { filterDOMProps, lowerHostAttrs } from './attrs.js';
+
+// ---------------------------------------------------------------------------
+// Platform detection
+// ---------------------------------------------------------------------------
+
+function isWebRenderEnvironment(): boolean {
+  const renderEnvironment = globalThis as typeof globalThis & {
+    __exactPlatform?: unknown;
+    __exactWebSsr?: unknown;
+  };
+
+  // Router SSR and static prerender toggle `__exactWebSsr` while route modules
+  // load and render. This check must stay dynamic because Vite can reuse one
+  // module instance across both non-SSR and SSR test phases.
+  return (
+    renderEnvironment.__exactPlatform === 'web' ||
+    renderEnvironment.__exactWebSsr === true ||
+    (
+      typeof document !== 'undefined' &&
+      typeof renderEnvironment.__exactPlatform === 'undefined'
+    )
+  );
+}
+
+const SelectableContext = React.createContext<TextElementProps['selectable'] | undefined>(undefined);
+
+function selectableModeToCss(mode: TextElementProps['selectable']): React.CSSProperties['userSelect'] {
+  switch (mode) {
+    case false:
+      return 'none';
+    case 'contain':
+      return 'contain' as React.CSSProperties['userSelect'];
+    case 'all':
+      return 'all';
+    case true:
+    default:
+      return 'text';
+  }
+}
+
+function resolveSelectableMode(
+  explicit: TextElementProps['selectable'],
+  inherited: TextElementProps['selectable'],
+  fallback: TextElementProps['selectable'],
+): TextElementProps['selectable'] {
+  if (explicit !== undefined) {
+    return explicit;
+  }
+
+  if (inherited !== undefined) {
+    return inherited;
+  }
+
+  return fallback;
+}
+
+// ---------------------------------------------------------------------------
+// Style helpers
+// ---------------------------------------------------------------------------
+
+// ENG-22206 (sibling of ENG-22199, the DOM-mirror analog): RN/Yoga and the
+// kernel/Taffy path default flexShrink to 0 — flex items keep their content
+// size and overflow rather than shrinking. CSS flexbox defaults flexShrink to
+// 1, so a bare View/row inside an overflowing flex column would shrink below
+// its content (down to the minHeight:0 below) and collapse to height 0 while
+// its children paint full-size, overlapping the next sibling. Matching the RN
+// default keeps the React-tier web renderer consistent with native and with
+// the Contract DOM mirror. Explicit `flex`/`flexShrink` in a component's style
+// is applied after these defaults and still wins (and WebScrollView overrides
+// flexShrink back to 1 so scroll regions stay bounded + scrollable).
+const viewDefaults: React.CSSProperties = {
+  display: 'flex',
+  flexDirection: 'column',
+  alignItems: 'stretch',
+  boxSizing: 'border-box',
+  position: 'relative',
+  minHeight: 0,
+  minWidth: 0,
+  flexShrink: 0,
+};
+
+const rowViewDefaults: React.CSSProperties = {
+  display: 'flex',
+  flexDirection: 'row',
+  alignItems: 'stretch',
+  boxSizing: 'border-box',
+  position: 'relative',
+  minHeight: 0,
+  minWidth: 0,
+  flexShrink: 0,
+};
+
+const buttonResetStyles: React.CSSProperties = {
+  appearance: 'none',
+  WebkitAppearance: 'none',
+  background: 'none',
+  border: 'none',
+  padding: 0,
+  margin: 0,
+  color: 'inherit',
+  font: 'inherit',
+  textAlign: 'inherit',
+};
+
+function mergeViewStyle(style: unknown): React.CSSProperties {
+  if (!style || typeof style !== 'object') {
+    return viewDefaults;
+  }
+
+  return { ...viewDefaults, ...expandShorthands(style as Record<string, unknown>) };
+}
+
+function mergeRowViewStyle(style: unknown): React.CSSProperties {
+  if (!style || typeof style !== 'object') {
+    return rowViewDefaults;
+  }
+
+  return { ...rowViewDefaults, ...expandShorthands(style as Record<string, unknown>) };
+}
+
+function mergeTextStyle(style: unknown): React.CSSProperties | undefined {
+  if (!style || typeof style !== 'object') {
+    return undefined;
+  }
+  return expandShorthands(style as Record<string, unknown>);
+}
+
+function createPressEvent(event: { clientX: number; clientY: number }): PressEvent {
+  return {
+    nativeEvent: {
+      locationX: event.clientX,
+      locationY: event.clientY,
+      timestamp: Date.now(),
+    },
+  };
+}
+
+/**
+ * Expand React Native shorthand properties (paddingHorizontal, etc.) into
+ * their CSS equivalents so React DOM applies them correctly.
+ */
+function expandShorthands(style: Record<string, unknown>): React.CSSProperties {
+  const expanded: Record<string, unknown> = {};
+  let shadow: { color?: string; x?: number; y?: number; radius?: number; opacity?: number } | null = null;
+
+  for (const key of Object.keys(style)) {
+    const value = style[key];
+
+    switch (key) {
+      // Exact transition maps and transform arrays are renderer-neutral data;
+      // React DOM needs the CSS string forms (shared with the DOM mirror so
+      // both web paths animate identically).
+      case 'transition': {
+        const converted = cssTransition(value);
+        if (converted) {
+          expanded.transition = converted;
+        }
+        break;
+      }
+      case 'transform': {
+        const converted = cssTransform(value);
+        if (converted) {
+          expanded.transform = converted;
+        }
+        break;
+      }
+      // Native draws a border from width + color alone; CSS additionally
+      // needs border-style or the border is invisible.
+      case 'borderWidth':
+        expanded.borderWidth = value;
+        expanded.borderStyle = style.borderStyle ?? 'solid';
+        break;
+      case 'borderTopWidth':
+        expanded.borderTopWidth = value;
+        expanded.borderTopStyle = 'solid';
+        break;
+      case 'borderRightWidth':
+        expanded.borderRightWidth = value;
+        expanded.borderRightStyle = 'solid';
+        break;
+      case 'borderBottomWidth':
+        expanded.borderBottomWidth = value;
+        expanded.borderBottomStyle = 'solid';
+        break;
+      case 'borderLeftWidth':
+        expanded.borderLeftWidth = value;
+        expanded.borderLeftStyle = 'solid';
+        break;
+      // Native shadow fields fold into a boxShadow only when no explicit
+      // boxShadow string is provided; either way they must not leak to DOM.
+      case 'shadowColor':
+        shadow = { ...(shadow ?? {}), color: value as string };
+        break;
+      case 'shadowOffset': {
+        const offset = value as { width?: number; height?: number } | null;
+        shadow = { ...(shadow ?? {}), x: offset?.width ?? 0, y: offset?.height ?? 0 };
+        break;
+      }
+      case 'shadowRadius':
+        shadow = { ...(shadow ?? {}), radius: value as number };
+        break;
+      case 'shadowOpacity':
+        shadow = { ...(shadow ?? {}), opacity: value as number };
+        break;
+      case 'paddingHorizontal':
+        expanded.paddingLeft ??= normalizeDOMStyleValue('paddingLeft', value);
+        expanded.paddingRight ??= normalizeDOMStyleValue('paddingRight', value);
+        break;
+      case 'paddingVertical':
+        expanded.paddingTop ??= normalizeDOMStyleValue('paddingTop', value);
+        expanded.paddingBottom ??= normalizeDOMStyleValue('paddingBottom', value);
+        break;
+      case 'marginHorizontal':
+        expanded.marginLeft ??= normalizeDOMStyleValue('marginLeft', value);
+        expanded.marginRight ??= normalizeDOMStyleValue('marginRight', value);
+        break;
+      case 'marginVertical':
+        expanded.marginTop ??= normalizeDOMStyleValue('marginTop', value);
+        expanded.marginBottom ??= normalizeDOMStyleValue('marginBottom', value);
+        break;
+      case 'paddingStart':
+      case 'paddingInlineStart':
+      case 'padding-inline-start':
+        expanded.paddingInlineStart ??= normalizeDOMStyleValue('paddingInlineStart', value);
+        break;
+      case 'paddingEnd':
+      case 'paddingInlineEnd':
+      case 'padding-inline-end':
+        expanded.paddingInlineEnd ??= normalizeDOMStyleValue('paddingInlineEnd', value);
+        break;
+      case 'marginStart':
+      case 'marginInlineStart':
+      case 'margin-inline-start':
+        expanded.marginInlineStart ??= normalizeDOMStyleValue('marginInlineStart', value);
+        break;
+      case 'marginEnd':
+      case 'marginInlineEnd':
+      case 'margin-inline-end':
+        expanded.marginInlineEnd ??= normalizeDOMStyleValue('marginInlineEnd', value);
+        break;
+      case 'start':
+      case 'insetInlineStart':
+      case 'inset-inline-start':
+        expanded.insetInlineStart ??= normalizeDOMStyleValue('insetInlineStart', value);
+        break;
+      case 'end':
+      case 'insetInlineEnd':
+      case 'inset-inline-end':
+        expanded.insetInlineEnd ??= normalizeDOMStyleValue('insetInlineEnd', value);
+        break;
+      default:
+        expanded[key] = normalizeDOMStyleValue(key, value);
+    }
+  }
+
+  if (expanded.boxShadow === undefined && shadow && (shadow.radius ?? 0) > 0 && shadow.color) {
+    const opacity = Math.max(0, Math.min(shadow.opacity ?? 1, 1));
+    const parsed = parseColor(shadow.color);
+    const cssColor = parsed
+      ? colorToRgba({ ...parsed, a: Math.round(parsed.a * opacity) })
+      : shadow.color;
+    expanded.boxShadow = `${shadow.x ?? 0}px ${shadow.y ?? 0}px ${shadow.radius}px ${cssColor}`;
+  }
+
+  return expanded as React.CSSProperties;
+}
+
+/**
+ * Web fallback for Liquid Glass. The real material only exists on iOS 26 /
+ * macOS 26 native surfaces; on web we approximate it with a translucent
+ * backdrop blur + saturation, a faint top highlight, and a soft shadow so a
+ * `glass` container still reads as a frosted floating panel. The native host
+ * keeps ownership of pixels inside a platform host, so this only fires on a
+ * plain browser tab / DOM-mirror render.
+ */
+function glassStyleFromProps(props: Record<string, unknown>): React.CSSProperties | undefined {
+  const enable = props.glassEffect ?? props.glass;
+  // An explicit off wins even when a variant/tint is present.
+  if (enable === false || enable === 'false') {
+    return undefined;
+  }
+  const enabled =
+    enable === true ||
+    typeof enable === 'string' ||
+    typeof props.glassVariant === 'string' ||
+    (typeof props.glassTint === 'string' && props.glassTint.length > 0) ||
+    props.glassInteractive === true;
+  if (!enabled) {
+    return undefined;
+  }
+  const variant =
+    props.glassVariant === 'clear' || enable === 'clear' ? 'clear' : 'regular';
+  const tint =
+    typeof props.glassTint === 'string' && props.glassTint.length > 0
+      ? props.glassTint
+      : undefined;
+  const blur = variant === 'clear' ? 10 : 18;
+  const base = variant === 'clear' ? 'rgba(255,255,255,0.08)' : 'rgba(255,255,255,0.16)';
+  const filter = `blur(${blur}px) saturate(180%)`;
+  return {
+    backdropFilter: filter,
+    WebkitBackdropFilter: filter,
+    backgroundColor: tint ?? base,
+    borderWidth: 1,
+    borderStyle: 'solid',
+    borderColor: 'rgba(255,255,255,0.22)',
+    boxShadow:
+      '0 8px 32px rgba(0,0,0,0.18), inset 0 1px 0 rgba(255,255,255,0.35)',
+  };
+}
+
+function normalizeDOMStyleValue(key: string, value: unknown): unknown {
+  if (key === 'backdropBlur' && typeof value === 'number' && isFinite(value)) {
+    return `blur(${value}px)`;
+  }
+
+  if (key === 'lineHeight' && typeof value === 'number' && isFinite(value)) {
+    return `${value}px`;
+  }
+
+  return value;
+}
+
+// ---------------------------------------------------------------------------
+// Web wrapper components
+// ---------------------------------------------------------------------------
+
+/**
+ * Render a web-style container while preserving Exact's selectable-text context.
+ *
+ * We use this helper for lowercase web tags (`div`, `span`) because they need
+ * the same DOM-prop filtering and inherited-selection behavior as the
+ * React-Native-style wrappers, but with different layout defaults.
+ */
+function renderWebContainer(
+  element: 'div' | 'span',
+  style: unknown,
+  children: React.ReactNode,
+  testID: string | undefined,
+  rest: Record<string, unknown>,
+  defaultStyle: React.CSSProperties,
+  inheritedSelectable: TextElementProps['selectable'],
+  resolvedSelectable: TextElementProps['selectable'],
+): React.ReactElement {
+  const baseStyle = style && typeof style === 'object'
+    ? expandShorthands(style as Record<string, unknown>)
+    : {};
+  const lowered = lowerHostAttrs({
+    tag: element,
+    props: { ...rest, testID },
+  }, undefined, { defaultTag: element });
+  const rendered = React.createElement(lowered.tag, {
+    style: {
+      ...defaultStyle,
+      ...baseStyle,
+      ...glassStyleFromProps(rest),
+    },
+    ...lowered.attrs,
+  }, children);
+
+  if (resolvedSelectable === inheritedSelectable) {
+    return rendered;
+  }
+
+  return React.createElement(SelectableContext.Provider, { value: resolvedSelectable }, rendered);
+}
+
+/**
+ * Lowercase `div` preserves web/CSS defaults: row layout, standard DOM
+ * semantics, and pass-through accessibility props. This is the wrapper Facet's
+ * token-only components rely on when they render through React DOM.
+ */
+function WebDiv({ style, children, testID, ...rest }: ContainerProps): React.ReactElement {
+  const inheritedSelectable = React.useContext(SelectableContext);
+  const resolvedSelectable = resolveSelectableMode(rest.selectable, inheritedSelectable, undefined);
+  return renderWebContainer(
+    'div',
+    style,
+    children,
+    testID,
+    rest as Record<string, unknown>,
+    rowViewDefaults,
+    inheritedSelectable,
+    resolvedSelectable,
+  );
+}
+
+/**
+ * Lowercase `span` stays inline-level on web while still accepting the same
+ * style/object prop surface as Exact containers. We intentionally use
+ * `inline-flex` here so row-layout children continue to behave predictably.
+ */
+function WebSpan({ style, children, testID, ...rest }: ContainerProps): React.ReactElement {
+  const inheritedSelectable = React.useContext(SelectableContext);
+  const resolvedSelectable = resolveSelectableMode(rest.selectable, inheritedSelectable, undefined);
+  return renderWebContainer(
+    'span',
+    style,
+    children,
+    testID,
+    rest as Record<string, unknown>,
+    {
+      ...rowViewDefaults,
+      display: 'inline-flex',
+    },
+    inheritedSelectable,
+    resolvedSelectable,
+  );
+}
+
+function WebView({ style, children, testID, ...rest }: ContainerProps): React.ReactElement {
+  const inheritedSelectable = React.useContext(SelectableContext);
+  const resolvedSelectable = resolveSelectableMode(rest.selectable, inheritedSelectable, undefined);
+  const lowered = lowerHostAttrs({
+    tag: 'View',
+    props: { ...rest, testID },
+  }, undefined, { defaultTag: 'div' });
+  const element = React.createElement(lowered.tag, {
+    style: { ...mergeViewStyle(style), ...glassStyleFromProps(rest) },
+    ...lowered.attrs,
+  }, children);
+
+  if (resolvedSelectable === inheritedSelectable) {
+    return element;
+  }
+
+  return React.createElement(SelectableContext.Provider, { value: resolvedSelectable }, element);
+}
+
+function WebText({
+  style,
+  children,
+  textContent,
+  numberOfLines,
+  selectable,
+  testID,
+  ...rest
+}: TextElementProps): React.ReactElement {
+  const inheritedSelectable = React.useContext(SelectableContext);
+  const resolvedSelectable = resolveSelectableMode(selectable, inheritedSelectable, true);
+  const baseStyle = mergeTextStyle(style);
+  const clampStyle: React.CSSProperties | undefined =
+    numberOfLines != null && numberOfLines > 0
+      ? numberOfLines === 1
+        ? {
+            display: 'block',
+            overflow: 'hidden',
+            textOverflow: 'ellipsis',
+            whiteSpace: 'nowrap',
+          }
+        : {
+            display: '-webkit-box',
+            WebkitLineClamp: numberOfLines,
+            WebkitBoxOrient: 'vertical' as const,
+            overflow: 'hidden',
+          }
+      : undefined;
+  const selectionStyle: React.CSSProperties | undefined =
+    resolvedSelectable === undefined
+      ? undefined
+      : {
+          userSelect: selectableModeToCss(resolvedSelectable),
+        };
+  const lowered = lowerHostAttrs({
+    tag: 'Text',
+    props: { ...rest, testID },
+  }, undefined, { defaultTag: 'span' });
+
+  return React.createElement(
+    SelectableContext.Provider,
+    { value: resolvedSelectable },
+    React.createElement(lowered.tag, {
+      style: {
+        ...baseStyle,
+        ...(clampStyle ?? {}),
+        ...(selectionStyle ?? {}),
+      },
+      ...lowered.attrs,
+    }, children ?? textContent),
+  );
+}
+
+function WebScrollView({
+  style,
+  children,
+  horizontal,
+  testID,
+  ...rest
+}: ScrollContainerProps): React.ReactElement {
+  const lowered = lowerHostAttrs({
+    tag: 'ScrollView',
+    props: { ...rest, testID },
+  }, undefined, { defaultTag: 'div' });
+  return React.createElement(lowered.tag, {
+    style: {
+      ...viewDefaults,
+      // A scroll region must shrink to fit its flex parent and scroll its
+      // overflow, so it opts back into shrinking (viewDefaults sets flexShrink:0
+      // for ENG-22206). Mirrors the DOM mirror's ScrollView `flex: 1 1 0%`.
+      flexShrink: 1,
+      overflow: 'auto',
+      flexDirection: horizontal ? 'row' : 'column',
+      ...(style && typeof style === 'object' ? expandShorthands(style as Record<string, unknown>) : {}),
+      ...glassStyleFromProps(rest),
+    },
+    ...lowered.attrs,
+  }, children);
+}
+
+function WebPressable({
+  style,
+  children,
+  onPress,
+  onPressIn,
+  onPressOut,
+  onLongPress,
+  disabled,
+  testID,
+  ...rest
+}: PressableElementProps): React.ReactElement {
+  const inheritedSelectable = React.useContext(SelectableContext);
+  const resolvedSelectable = resolveSelectableMode(rest.selectable, inheritedSelectable, false);
+  const longPressRef = React.useRef<ReturnType<typeof setTimeout> | null>(null);
+  const lowered = lowerHostAttrs({
+    tag: 'Pressable',
+    props: { ...(rest as Record<string, unknown>), testID },
+  }, undefined, { defaultTag: 'div', defaultRole: 'button' });
+  const domProps = lowered.attrs;
+  const requestedTabIndex =
+    typeof domProps.tabIndex === 'number' ? domProps.tabIndex : undefined;
+  const requestedFocusable =
+    typeof rest.focusable === 'boolean' ? rest.focusable : undefined;
+
+  delete domProps.tabIndex;
+
+  // Compose passthrough DOM handlers with the synthesized press handlers so the
+  // trailing `...domProps` spread can't clobber onPress/press-in/out with a
+  // (frequently undefined) passthrough value. See WebButton for the same fix.
+  const userOnClick = domProps.onClick as ((event: unknown) => void) | undefined;
+  const userOnMouseDown = domProps.onMouseDown as ((event: unknown) => void) | undefined;
+  const userOnMouseUp = domProps.onMouseUp as ((event: unknown) => void) | undefined;
+  const userOnKeyDown = domProps.onKeyDown as ((event: unknown) => void) | undefined;
+  delete domProps.onClick;
+  delete domProps.onMouseDown;
+  delete domProps.onMouseUp;
+  delete domProps.onKeyDown;
+
+  const handleMouseDown = React.useCallback(
+    (event: React.MouseEvent) => {
+      if (onPressIn) {
+        onPressIn(createPressEvent(event));
+      }
+      if (onLongPress) {
+        longPressRef.current = setTimeout(() => {
+          onLongPress(createPressEvent(event));
+        }, 500);
+      }
+      if (userOnMouseDown) {
+        userOnMouseDown(event);
+      }
+    },
+    [onPressIn, onLongPress, userOnMouseDown],
+  );
+
+  const handleMouseUp = React.useCallback(
+    (event: React.MouseEvent) => {
+      if (longPressRef.current != null) {
+        clearTimeout(longPressRef.current);
+        longPressRef.current = null;
+      }
+      if (onPressOut) {
+        onPressOut(createPressEvent(event));
+      }
+      if (userOnMouseUp) {
+        userOnMouseUp(event);
+      }
+    },
+    [onPressOut, userOnMouseUp],
+  );
+
+  const handleClick = React.useCallback(
+    (event: React.MouseEvent) => {
+      if (onPress) {
+        onPress(createPressEvent(event));
+      }
+      if (userOnClick) {
+        userOnClick(event);
+      }
+    },
+    [onPress, userOnClick],
+  );
+
+  const handleKeyDown = React.useCallback(
+    (event: React.KeyboardEvent) => {
+      if ((event.key === 'Enter' || event.key === ' ') && onPress) {
+        event.preventDefault();
+        onPress({ nativeEvent: { locationX: 0, locationY: 0, timestamp: Date.now() } });
+      }
+      if (userOnKeyDown) {
+        userOnKeyDown(event);
+      }
+    },
+    [onPress, userOnKeyDown],
+  );
+
+  // Clean up pending long press timeout on unmount
+  React.useEffect(() => {
+    return () => {
+      if (longPressRef.current != null) {
+        clearTimeout(longPressRef.current);
+      }
+    };
+  }, []);
+
+  return React.createElement(
+    SelectableContext.Provider,
+    { value: resolvedSelectable },
+    React.createElement(lowered.tag, {
+      style: {
+        ...mergeViewStyle(style),
+        cursor: disabled ? 'default' : onPress ? 'pointer' : undefined,
+        opacity: disabled ? 0.5 : undefined,
+        ...glassStyleFromProps(rest as Record<string, unknown>),
+      },
+      onClick: disabled ? undefined : handleClick,
+      onMouseDown: disabled ? undefined : handleMouseDown,
+      onMouseUp: disabled ? undefined : handleMouseUp,
+      onKeyDown: disabled ? undefined : handleKeyDown,
+      role: 'button',
+      // Honor roving-focus / explicit focusability requests instead of forcing
+      // every pressable into the tab order. This is required for compound
+      // widgets like radio groups, menus, and listboxes.
+      tabIndex: disabled
+        ? -1
+          : requestedFocusable === false
+            ? -1
+            : requestedTabIndex ?? 0,
+      'aria-disabled': disabled || undefined,
+      ...domProps,
+    }, children),
+  );
+}
+
+const WebButton = React.forwardRef<HTMLButtonElement, PressableElementProps>(
+  function WebButton({
+    style,
+    children,
+    onPress,
+    onPressIn,
+    onPressOut,
+    onLongPress,
+    disabled,
+    testID,
+    accessibilityRole,
+    accessibilityLabel,
+    ...rest
+  }, ref): React.ReactElement {
+    const inheritedSelectable = React.useContext(SelectableContext);
+    const resolvedSelectable = resolveSelectableMode(rest.selectable, inheritedSelectable, false);
+    const longPressRef = React.useRef<ReturnType<typeof setTimeout> | null>(null);
+
+    // Any passthrough DOM handlers must COMPOSE with the synthesized press
+    // handlers, never clobber them. They are pulled out of `rest` here so the
+    // trailing `...domProps` spread below can't overwrite onClick/onMouse* with
+    // a (frequently undefined) passthrough value — the bug that silently killed
+    // onPress on every Facet Button, which forwards `onClick={undefined}`.
+    const restRecord = rest as Record<string, unknown>;
+    const userOnClick = restRecord.onClick as ((event: unknown) => void) | undefined;
+    const userOnMouseDown = restRecord.onMouseDown as ((event: unknown) => void) | undefined;
+    const userOnMouseUp = restRecord.onMouseUp as ((event: unknown) => void) | undefined;
+    delete (rest as Record<string, unknown>).onClick;
+    delete (rest as Record<string, unknown>).onMouseDown;
+    delete (rest as Record<string, unknown>).onMouseUp;
+
+    const handleMouseDown = React.useCallback(
+      (event: React.MouseEvent<HTMLButtonElement>) => {
+        if (onPressIn) {
+          onPressIn(createPressEvent(event));
+        }
+        if (onLongPress) {
+          longPressRef.current = setTimeout(() => {
+            onLongPress(createPressEvent(event));
+          }, 500);
+        }
+        if (userOnMouseDown) {
+          userOnMouseDown(event);
+        }
+      },
+      [onPressIn, onLongPress, userOnMouseDown],
+    );
+
+    const handleMouseUp = React.useCallback(
+      (event: React.MouseEvent<HTMLButtonElement>) => {
+        if (longPressRef.current != null) {
+          clearTimeout(longPressRef.current);
+          longPressRef.current = null;
+        }
+        if (onPressOut) {
+          onPressOut(createPressEvent(event));
+        }
+        if (userOnMouseUp) {
+          userOnMouseUp(event);
+        }
+      },
+      [onPressOut, userOnMouseUp],
+    );
+
+    const handleClick = React.useCallback(
+      (event: React.MouseEvent<HTMLButtonElement>) => {
+        if (onPress) {
+          onPress(createPressEvent(event));
+        }
+        if (userOnClick) {
+          userOnClick(event);
+        }
+      },
+      [onPress, userOnClick],
+    );
+
+    React.useEffect(() => {
+      return () => {
+        if (longPressRef.current != null) {
+          clearTimeout(longPressRef.current);
+        }
+      };
+    }, []);
+
+    const lowered = lowerHostAttrs({
+      tag: 'button',
+      props: {
+        ...(rest as Record<string, unknown>),
+        accessibilityRole,
+        accessibilityLabel,
+        testID,
+      },
+    }, undefined, { defaultTag: 'button', defaultRole: 'button' });
+    const domProps = lowered.attrs;
+    const requestedTabIndex =
+      typeof domProps.tabIndex === 'number' ? domProps.tabIndex : undefined;
+    const requestedFocusable =
+      typeof rest.focusable === 'boolean' ? rest.focusable : undefined;
+    const resolvedRole = typeof domProps.role === 'string' ? domProps.role : undefined;
+
+    delete domProps.role;
+    delete domProps['aria-disabled'];
+    delete domProps.tabIndex;
+
+    return React.createElement(
+      SelectableContext.Provider,
+      { value: resolvedSelectable },
+      React.createElement('button', {
+        ref,
+        type: 'button',
+        style: {
+          ...buttonResetStyles,
+          ...mergeRowViewStyle(style),
+          cursor: disabled ? 'default' : onPress ? 'pointer' : undefined,
+        },
+        onClick: disabled ? undefined : handleClick,
+        onMouseDown: disabled ? undefined : handleMouseDown,
+        onMouseUp: disabled ? undefined : handleMouseUp,
+        disabled: disabled || undefined,
+        // Preserve any tab-order decision made higher up the tree. This keeps
+        // web buttons compatible with roving-focus widgets built on ButtonTag.
+        tabIndex: disabled
+          ? -1
+          : requestedFocusable === false
+            ? -1
+            : requestedTabIndex ?? 0,
+        role: resolvedRole,
+        ...domProps,
+      }, children),
+    );
+  },
+);
+
+function WebTextInput({
+  style,
+  value,
+  defaultValue,
+  placeholder,
+  placeholderTextColor,
+  multiline,
+  numberOfLines,
+  maxLength,
+  editable,
+  autoFocus,
+  selection,
+  secureTextEntry,
+  keyboardType,
+  onChangeText,
+  onChange,
+  onSelectionChange,
+  onFocus,
+  onBlur,
+  onSubmitEditing,
+  testID,
+  ...rest
+}: TextInputProps): React.ReactElement {
+  const inputRef = React.useRef<HTMLInputElement | HTMLTextAreaElement | null>(null);
+
+  React.useEffect(() => {
+    const input = inputRef.current;
+    if (!input || !selection) {
+      return;
+    }
+
+    const textLength = input.value.length;
+    const start = Math.max(0, Math.min(textLength, selection.start));
+    const end = Math.max(0, Math.min(textLength, selection.end));
+    if (input.selectionStart !== start || input.selectionEnd !== end) {
+      input.setSelectionRange(start, end);
+    }
+  }, [selection, value, defaultValue]);
+
+  const publishSelection = React.useCallback(
+    (input: HTMLInputElement | HTMLTextAreaElement) => {
+      if (!onSelectionChange) {
+        return;
+      }
+
+      const start = input.selectionStart ?? 0;
+      const end = input.selectionEnd ?? start;
+      onSelectionChange({
+        nativeEvent: {
+          selection: { start, end },
+          text: input.value,
+        },
+      });
+    },
+    [onSelectionChange],
+  );
+
+  const handleChange = React.useCallback(
+    (event: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
+      const text = event.target.value;
+      const start = event.target.selectionStart ?? 0;
+      const end = event.target.selectionEnd ?? start;
+      if (onChangeText) {
+        onChangeText(text);
+      }
+      if (onChange) {
+        onChange({ nativeEvent: { text, selection: { start, end } } });
+      }
+      publishSelection(event.target);
+    },
+    [onChangeText, onChange, publishSelection],
+  );
+
+  const handleSelect = React.useCallback(
+    (event: React.SyntheticEvent<HTMLInputElement | HTMLTextAreaElement>) => {
+      publishSelection(event.currentTarget);
+    },
+    [publishSelection],
+  );
+
+  const handleKeyDown = React.useCallback(
+    (event: React.KeyboardEvent) => {
+      if (event.key === 'Enter' && !multiline && onSubmitEditing) {
+        onSubmitEditing();
+      }
+    },
+    [multiline, onSubmitEditing],
+  );
+
+  const inputType = secureTextEntry
+    ? 'password'
+    : keyboardType === 'numeric'
+      ? 'number'
+      : keyboardType === 'email-address'
+        ? 'email'
+        : keyboardType === 'phone-pad'
+          ? 'tel'
+          : 'text';
+
+  const baseStyle = style && typeof style === 'object'
+    ? expandShorthands(style as Record<string, unknown>)
+    : {};
+
+  const tag = multiline ? 'textarea' : 'input';
+  const lowered = lowerHostAttrs({
+    tag: 'TextInput',
+    props: { ...(rest as Record<string, unknown>), testID },
+  }, undefined, { defaultTag: tag });
+  delete lowered.attrs.onKeyDown;
+  const props: Record<string, unknown> = {
+    ref: inputRef,
+    style: { boxSizing: 'border-box' as const, ...baseStyle },
+    value,
+    defaultValue,
+    placeholder,
+    maxLength,
+    readOnly: editable === false ? true : undefined,
+    autoFocus,
+    onChange: handleChange,
+    onFocus,
+    onBlur,
+    onSelect: onSelectionChange ? handleSelect : undefined,
+    onKeyDown: onSubmitEditing ? handleKeyDown : undefined,
+    ...lowered.attrs,
+  };
+
+  if (!multiline) {
+    props.type = inputType;
+  } else if (numberOfLines) {
+    props.rows = numberOfLines;
+  }
+
+  return React.createElement(tag, props);
+}
+
+/**
+ * Lowercase `img` is the web-style image surface. Unlike `Image`, it accepts
+ * `src`/`alt`/`objectFit` directly and should render as a plain DOM `<img>`
+ * when React DOM is active.
+ */
+function WebImg({
+  style,
+  src,
+  lightSrc,
+  darkSrc,
+  alt,
+  width,
+  height,
+  objectFit,
+  objectPosition,
+  loading,
+  themeTreatment,
+  testID,
+  ...rest
+}: import('./types.js').ImageElementProps): React.ReactElement {
+  const baseStyle = style && typeof style === 'object'
+    ? expandShorthands(style as Record<string, unknown>)
+    : {};
+  const resolvedSource = resolveImageSourceForDOM(
+    lightSrc || darkSrc
+      ? {
+          ...(lightSrc ? { light: lightSrc } : {}),
+          ...(darkSrc ? { dark: darkSrc } : {}),
+          fallback: src,
+        }
+      : src,
+  );
+
+  return React.createElement('img', {
+    src: resolvedSource?.src ?? src,
+    alt: alt ?? '',
+    width,
+    height,
+    loading,
+    style: {
+      display: 'block',
+      boxSizing: 'border-box',
+      objectFit,
+      objectPosition,
+      ...baseStyle,
+    },
+    'data-testid': testID,
+    'data-exact-theme-image': lightSrc || darkSrc || themeTreatment ? 'color-scheme' : undefined,
+    'data-light-src': lightSrc,
+    'data-dark-src': darkSrc,
+    'data-exact-theme-treatment': themeTreatment === 'none' ? undefined : themeTreatment,
+    ...filterDOMProps(rest as Record<string, unknown>),
+  });
+}
+
+function WebImage({
+  source,
+  lightSrc,
+  darkSrc,
+  style,
+  resizeMode,
+  objectFit,
+  objectPosition,
+  alt,
+  decorative,
+  longDescription,
+  placeholder,
+  loading,
+  onLoadStart,
+  onLoad,
+  onError,
+  onDisplay,
+  themeTreatment,
+  testID,
+}: RNImageProps): React.ReactElement {
+  const themedSource = React.useMemo<ImageSource>(() => {
+    if (!lightSrc && !darkSrc) {
+      return source;
+    }
+    return {
+      ...(lightSrc ? { light: lightSrc } : {}),
+      ...(darkSrc ? { dark: darkSrc } : {}),
+      fallback: source,
+    };
+  }, [source, lightSrc, darkSrc]);
+  const selectedSource = React.useMemo(() => resolveThemeAwareImageSource(themedSource), [themedSource]);
+  const delegatedSvgSource = React.useMemo(() => coerceImageSourceToSvgSource(selectedSource), [selectedSource]);
+  if (delegatedSvgSource !== undefined) {
+    return React.createElement(WebSvg, {
+      source: delegatedSvgSource,
+      style,
+      objectFit: objectFit ?? mapResizeModeToObjectFit(resizeMode),
+      objectPosition,
+      alt,
+      decorative,
+      testID,
+    });
+  }
+
+  React.useEffect(() => {
+    warnIfImageMissingAlt({ source: themedSource, alt, decorative, testID });
+  }, [themedSource, alt, decorative, testID]);
+
+  const resolvedSource = React.useMemo(() => resolveImageSourceForDOM(themedSource), [themedSource]);
+  const resolvedPlaceholder = React.useMemo(
+    () => resolveImagePlaceholderForDOM(placeholder),
+    [placeholder],
+  );
+
+  React.useEffect(() => {
+    if (resolvedSource?.src && onLoadStart) {
+      onLoadStart();
+    }
+  }, [resolvedSource?.src, onLoadStart]);
+
+  const fit = objectFit ?? mapResizeModeToObjectFit(resizeMode);
+  const baseStyle = style && typeof style === 'object'
+    ? expandShorthands(style as Record<string, unknown>)
+    : {};
+  const layoutWidth = readPositivePixelDimension(baseStyle.width);
+  const layoutHeight = readPositivePixelDimension(baseStyle.height);
+  const computedAlt = decorative ? '' : alt ?? '';
+  const imageStyle: React.CSSProperties = {
+    display: 'block',
+    boxSizing: 'border-box',
+    objectFit: fit,
+    objectPosition,
+    backgroundColor: resolvedPlaceholder?.backgroundColor,
+    backgroundImage: resolvedPlaceholder?.backgroundImage,
+    backgroundPosition: objectPosition ?? 'center',
+    backgroundRepeat: 'no-repeat',
+    backgroundSize: fit ?? 'cover',
+    ...baseStyle,
+  };
+
+  const handleLoad = React.useCallback((event: React.SyntheticEvent<HTMLImageElement>) => {
+    if (onLoad) {
+      onLoad({
+        source: {
+          uri: resolvedSource?.src ?? '',
+          width: event.currentTarget.naturalWidth,
+          height: event.currentTarget.naturalHeight,
+        },
+        cacheType: 'none',
+      });
+    }
+    onDisplay?.();
+  }, [onLoad, onDisplay, resolvedSource?.src]);
+
+  const handleError = React.useCallback(() => {
+    onError?.({ error: 'Image failed to load.' });
+  }, [onError]);
+
+  const imgElement = React.createElement('img', {
+    src: resolvedSource?.src ?? '',
+    srcSet: resolvedSource?.srcSet,
+    alt: computedAlt,
+    width: layoutWidth,
+    height: layoutHeight,
+    loading: normalizeImageLoading(loading),
+    style: imageStyle,
+    onLoad: handleLoad,
+    onError: handleError,
+    'data-testid': testID,
+    'aria-hidden': decorative ? true : undefined,
+    'aria-description': longDescription,
+    'data-exact-theme-image': resolvedSource?.themeSources || themeTreatment ? 'color-scheme' : undefined,
+    'data-light-src': resolvedSource?.themeSources?.light,
+    'data-dark-src': resolvedSource?.themeSources?.dark,
+    'data-exact-theme-treatment': themeTreatment === 'none' ? undefined : themeTreatment,
+  });
+
+  if (!resolvedSource?.pictureSources || resolvedSource.pictureSources.length === 0) {
+    return imgElement;
+  }
+
+  return React.createElement(
+    'picture',
+    null,
+    ...resolvedSource.pictureSources.map((entry, index) => React.createElement('source', {
+      key: `${entry.type ?? 'fallback'}-${index}`,
+      type: entry.type,
+      srcSet: entry.srcSet,
+    })),
+    imgElement,
+  );
+}
+
+function readPositivePixelDimension(value: unknown): number | undefined {
+  if (typeof value === 'number' && isFinite(value) && value > 0) {
+    return Math.round(value);
+  }
+
+  return undefined;
+}
+
+function mapResizeModeToObjectFit(resizeMode: RNImageProps['resizeMode']): ImageObjectFit | undefined {
+  switch (resizeMode) {
+    case 'contain':
+      return 'contain';
+    case 'stretch':
+      return 'fill';
+    case 'center':
+      return 'none';
+    case 'cover':
+      return 'cover';
+    default:
+      return undefined;
+  }
+}
+
+let nextInlineSvgTitleId = 1;
+
+function WebSvg(props: SvgProps): React.ReactElement {
+  const filteredColors = React.useMemo(() => filterSvgColors(props.colors), [props.colors]);
+
+  React.useEffect(() => {
+    warnIfImageMissingAlt({
+      source: props.source as unknown as ImageSource,
+      alt: props.alt,
+      decorative: props.decorative,
+      testID: props.testID,
+    });
+  }, [props.source, props.alt, props.decorative, props.testID]);
+
+  const needsInlineMarkup =
+    isInlineSvgSource(props.source) ||
+    props.tintColor != null ||
+    filteredColors != null ||
+    (typeof props.source === 'object' && props.source !== null && 'headers' in props.source);
+  const request = React.useMemo(() => resolveSvgSourceForFetch(props.source), [props.source]);
+  const [markup, setMarkup] = React.useState<string | undefined>(request?.markup);
+
+  React.useEffect(() => {
+    if (!needsInlineMarkup) {
+      setMarkup(undefined);
+      return;
+    }
+
+    if (!request) {
+      setMarkup(undefined);
+      return;
+    }
+
+    if (request.markup != null) {
+      setMarkup(request.markup);
+      return;
+    }
+
+    if (!request.uri) {
+      setMarkup(undefined);
+      return;
+    }
+
+    const abortController = new AbortController();
+    let cancelled = false;
+    fetch(request.uri, {
+      headers: request.headers,
+      signal: abortController.signal as AbortSignal,
+    })
+      .then(async (response) => {
+        if (!response.ok) {
+          throw new Error(`SVG request failed with ${response.status}`);
+        }
+        return response.text();
+      })
+      .then((text) => {
+        if (!cancelled) {
+          setMarkup(text);
+        }
+      })
+      .catch((error: unknown) => {
+        if (
+          cancelled ||
+          (typeof DOMException !== 'undefined' && error instanceof DOMException && error.name === 'AbortError')
+        ) {
+          return;
+        }
+        console.warn('[Exact] Failed to load SVG source.', error);
+        setMarkup(undefined);
+      });
+
+    return () => {
+      cancelled = true;
+      abortController.abort();
+    };
+  }, [needsInlineMarkup, request]);
+
+  if (needsInlineMarkup && markup != null) {
+    return React.createElement(InlineSvgHost, { ...props, colors: filteredColors, markup });
+  }
+
+  const src = resolveSvgSourceForDOM(props.source);
+  const baseStyle = props.style && typeof props.style === 'object'
+    ? expandShorthands(props.style as Record<string, unknown>)
+    : {};
+  const containerStyle: React.CSSProperties = {
+    display: 'block',
+    boxSizing: 'border-box',
+    ...baseStyle,
+  };
+
+  return React.createElement('img', {
+    src: src ?? '',
+    alt: props.decorative ? '' : (props.alt ?? ''),
+    style: {
+      ...containerStyle,
+      objectFit: props.objectFit ?? 'contain',
+      objectPosition: props.objectPosition,
+    },
+    'data-testid': props.testID,
+    'aria-hidden': props.decorative ? true : undefined,
+  });
+}
+
+function InlineSvgHost(
+  props: SvgProps & { markup: string },
+): React.ReactElement {
+  const hostRef = React.useRef<HTMLSpanElement | null>(null);
+  const baseStyle = props.style && typeof props.style === 'object'
+    ? expandShorthands(props.style as Record<string, unknown>)
+    : {};
+
+  React.useEffect(() => {
+    const host = hostRef.current;
+    if (!host) {
+      return;
+    }
+
+    while (host.firstChild) {
+      host.removeChild(host.firstChild);
+    }
+
+    const parser = new DOMParser();
+    const doc = parser.parseFromString(props.markup, 'image/svg+xml');
+    if (doc.querySelector('parsererror')) {
+      console.warn('[Exact] Invalid inline SVG source.');
+      return;
+    }
+
+    const documentElement = doc.documentElement;
+    if (!documentElement || documentElement.tagName.toLowerCase() !== 'svg') {
+      console.warn('[Exact] Inline SVG source must contain an <svg> root element.');
+      return;
+    }
+
+    const svgEl = document.adoptNode(documentElement) as unknown as SVGSVGElement;
+    svgEl.style.display = 'block';
+    svgEl.style.width = '100%';
+    svgEl.style.height = '100%';
+
+    applySvgSizing(svgEl, props.objectFit, props.objectPosition);
+    applySvgTint(svgEl, props.tintColor);
+
+    if (props.colors) {
+      for (const [key, value] of Object.entries(props.colors)) {
+        svgEl.style.setProperty(key, value);
+      }
+    }
+
+    if (props.decorative) {
+      svgEl.setAttribute('aria-hidden', 'true');
+    } else if (props.alt) {
+      svgEl.setAttribute('role', 'img');
+      let title = svgEl.querySelector<SVGElement>('title');
+      if (!title) {
+        title = document.createElementNS('http://www.w3.org/2000/svg', 'title') as SVGElement;
+        svgEl.prepend(title);
+      }
+      title.textContent = props.alt;
+      const titleId = `exact-svg-title-${nextInlineSvgTitleId++}`;
+      title.setAttribute('id', titleId);
+      svgEl.setAttribute('aria-labelledby', titleId);
+    }
+
+    host.appendChild(svgEl);
+
+    return () => {
+      if (host.contains(svgEl)) {
+        host.removeChild(svgEl);
+      }
+    };
+  }, [
+    props.colors,
+    props.alt,
+    props.decorative,
+    props.markup,
+    props.objectFit,
+    props.objectPosition,
+    props.tintColor,
+  ]);
+
+  return React.createElement('span', {
+    ref: hostRef,
+    style: {
+      display: 'block',
+      boxSizing: 'border-box',
+      overflow: 'hidden',
+      ...baseStyle,
+    },
+    'data-testid': props.testID,
+  });
+}
+
+function applySvgSizing(
+  svgEl: SVGSVGElement,
+  objectFit: SvgProps['objectFit'],
+  objectPosition: SvgProps['objectPosition'],
+): void {
+  const alignment = mapObjectPositionToSvgAlign(objectPosition);
+  const fit = objectFit ?? 'contain';
+
+  switch (fit) {
+    case 'cover':
+      svgEl.setAttribute('preserveAspectRatio', `${alignment} slice`);
+      break;
+    case 'fill':
+      svgEl.setAttribute('preserveAspectRatio', 'none');
+      break;
+    case 'none':
+      svgEl.setAttribute('preserveAspectRatio', alignment);
+      break;
+    case 'contain':
+    case 'scale-down':
+    default:
+      svgEl.setAttribute('preserveAspectRatio', `${alignment} meet`);
+      break;
+  }
+}
+
+function mapObjectPositionToSvgAlign(objectPosition: string | undefined): string {
+  if (!objectPosition) {
+    return 'xMidYMid';
+  }
+
+  const tokens = objectPosition.toLowerCase().trim().split(/\s+/).filter(Boolean);
+  let horizontal: 'xMin' | 'xMid' | 'xMax' = 'xMid';
+  let vertical: 'YMin' | 'YMid' | 'YMax' = 'YMid';
+
+  for (const token of tokens) {
+    if (token === 'left') {
+      horizontal = 'xMin';
+    } else if (token === 'right') {
+      horizontal = 'xMax';
+    } else if (token === 'top') {
+      vertical = 'YMin';
+    } else if (token === 'bottom') {
+      vertical = 'YMax';
+    } else if (token === 'center') {
+      if (!tokens.some((value) => value === 'left' || value === 'right')) {
+        horizontal = 'xMid';
+      }
+      if (!tokens.some((value) => value === 'top' || value === 'bottom')) {
+        vertical = 'YMid';
+      }
+    }
+  }
+
+  return `${horizontal}${vertical}`;
+}
+
+function applySvgTint(svgEl: SVGSVGElement, tintColor: string | undefined): void {
+  if (!tintColor) {
+    return;
+  }
+
+  svgEl.style.color = tintColor;
+  const paintedNodes = svgEl.querySelectorAll<SVGElement>('[fill], [stroke]');
+  paintedNodes.forEach((node) => {
+    const fill = node.getAttribute('fill');
+    if (fill && fill !== 'none' && !fill.startsWith('url(')) {
+      node.setAttribute('fill', 'currentColor');
+    }
+
+    const stroke = node.getAttribute('stroke');
+    if (stroke && stroke !== 'none' && !stroke.startsWith('url(')) {
+      node.setAttribute('stroke', 'currentColor');
+    }
+  });
+}
+
+function WebToggle({ value, onValueChange, disabled, testID, style }: ToggleProps): React.ReactElement {
+  const handleChange = React.useCallback(
+    (event: React.ChangeEvent<HTMLInputElement>) => {
+      if (onValueChange) {
+        onValueChange(event.target.checked);
+      }
+    },
+    [onValueChange],
+  );
+
+  const baseStyle = style && typeof style === 'object'
+    ? expandShorthands(style as Record<string, unknown>)
+    : {};
+
+  return React.createElement('input', {
+    type: 'checkbox',
+    checked: value,
+    onChange: handleChange,
+    disabled,
+    style: baseStyle,
+    'data-testid': testID,
+  });
+}
+
+// ---------------------------------------------------------------------------
+// Exports — platform-aware
+// ---------------------------------------------------------------------------
+
+export const text: React.FC<TextElementProps> = function ExactTextPrimitive(props) {
+  return isWebRenderEnvironment()
+    ? React.createElement(WebText, props)
+    : React.createElement('text', props);
+};
+
+export const div: React.FC<ContainerProps> = function ExactDivPrimitive(props) {
+  return isWebRenderEnvironment()
+    ? React.createElement(WebDiv, props)
+    : React.createElement('div', props);
+};
+
+export const span: React.FC<ContainerProps> = function ExactSpanPrimitive(props) {
+  return isWebRenderEnvironment()
+    ? React.createElement(WebSpan, props)
+    : React.createElement('span', props);
+};
+
+export const button = React.forwardRef<HTMLButtonElement, PressableElementProps>(
+  function ExactButtonPrimitive(props, ref) {
+    return isWebRenderEnvironment()
+      ? React.createElement(WebButton, { ...props, ref })
+      : React.createElement('button', { ...props, ref } as any);
+  },
+);
+
+export const input: React.FC<TextInputProps> = function ExactInputPrimitive(props) {
+  return isWebRenderEnvironment()
+    ? React.createElement(WebTextInput, props)
+    : React.createElement('input', props);
+};
+
+export const img: React.FC<import('./types.js').ImageElementProps> = function ExactImgPrimitive(props) {
+  return isWebRenderEnvironment()
+    ? React.createElement(WebImg, props)
+    : React.createElement('img', props);
+};
+
+export const View: React.FC<ContainerProps> = function ExactViewPrimitive(props) {
+  return isWebRenderEnvironment()
+    ? React.createElement(WebView, props)
+    : React.createElement('View', props);
+};
+
+export const Text: React.FC<TextElementProps> = function ExactTextComponentPrimitive(props) {
+  return isWebRenderEnvironment()
+    ? React.createElement(WebText, props)
+    : React.createElement('Text', props);
+};
+
+export const ScrollView: React.FC<ScrollContainerProps> = function ExactScrollViewPrimitive(props) {
+  return isWebRenderEnvironment()
+    ? React.createElement(WebScrollView, props)
+    : React.createElement('ScrollView', props);
+};
+
+export const List: React.FC<ScrollContainerProps> = function ExactListPrimitive(props) {
+  return isWebRenderEnvironment()
+    ? React.createElement(WebScrollView, props)
+    : React.createElement('List', props);
+};
+
+export const Pressable: React.FC<PressableElementProps> = function ExactPressablePrimitive(props) {
+  return isWebRenderEnvironment()
+    ? React.createElement(WebPressable, props)
+    : React.createElement('Pressable', props);
+};
+
+export const TextInput: React.FC<TextInputProps> = function ExactTextInputPrimitive(props) {
+  return isWebRenderEnvironment()
+    ? React.createElement(WebTextInput, props)
+    : React.createElement('TextInput', props);
+};
+
+function NativeImage(props: RNImageProps): React.ReactElement {
+  const delegatedSvgSource = coerceImageSourceToSvgSource(props.source);
+  if (delegatedSvgSource !== undefined) {
+    return React.createElement(NativeSvg, {
+      source: delegatedSvgSource,
+      style: props.style,
+      objectFit: props.objectFit ?? mapResizeModeToObjectFit(props.resizeMode),
+      objectPosition: props.objectPosition,
+      alt: props.alt,
+      decorative: props.decorative,
+      testID: props.testID,
+    });
+  }
+
+  warnIfImageMissingAlt({
+    source: props.source,
+    alt: props.alt,
+    decorative: props.decorative,
+    testID: props.testID,
+  });
+
+  return React.createElement('Image', props);
+}
+
+export const Image: React.FC<RNImageProps> = function ExactImagePrimitive(props) {
+  return isWebRenderEnvironment()
+    ? React.createElement(WebImage, props)
+    : React.createElement(NativeImage, props);
+};
+
+function NativeSvg(props: SvgProps): React.ReactElement {
+  const request = React.useMemo(() => resolveSvgSourceForFetch(props.source), [props.source]);
+  const [resolvedMarkup, setResolvedMarkup] = React.useState<string>(request?.markup ?? '');
+  const pixelDensity = props.pixelDensity ?? getDefaultSvgPixelDensity();
+
+  React.useEffect(() => {
+    if (!request) {
+      setResolvedMarkup('');
+      return;
+    }
+
+    if (request.markup != null) {
+      setResolvedMarkup(request.markup);
+      return;
+    }
+
+    if (!request.uri) {
+      setResolvedMarkup('');
+      return;
+    }
+
+    const abortController = new AbortController();
+    let cancelled = false;
+    fetch(request.uri, {
+      headers: request.headers,
+      signal: abortController.signal as AbortSignal,
+    })
+      .then(async (response) => {
+        if (!response.ok) {
+          throw new Error(`SVG request failed with ${response.status}`);
+        }
+        return response.text();
+      })
+      .then((text) => {
+        if (!cancelled) {
+          setResolvedMarkup(text);
+        }
+      })
+      .catch((error: unknown) => {
+        if (
+          cancelled ||
+          (typeof DOMException !== 'undefined' && error instanceof DOMException && error.name === 'AbortError')
+        ) {
+          return;
+        }
+        console.warn('[Exact] Failed to resolve SVG source for native rendering.', error);
+        setResolvedMarkup('');
+      });
+
+    return () => {
+      cancelled = true;
+      abortController.abort();
+    };
+  }, [request]);
+
+  return React.createElement('Svg', {
+    ...props,
+    colors: filterSvgColors(props.colors),
+    pixelDensity,
+    source: resolvedMarkup,
+  });
+}
+
+export const Svg: React.FC<SvgProps> = function ExactSvgPrimitive(props) {
+  return isWebRenderEnvironment()
+    ? React.createElement(WebSvg, props)
+    : React.createElement(NativeSvg, props);
+};
+
+export const Toggle: React.FC<ToggleProps> = function ExactTogglePrimitive(props) {
+  return isWebRenderEnvironment()
+    ? React.createElement(WebToggle, props)
+    : React.createElement('Toggle', props);
+};
+
+export const Switch: React.FC<ToggleProps> = Toggle;