@vrplatform/voice-chat 0.1.0

package/src/VRPilotHighlightProvider.tsx

@@ -0,0 +1,942 @@
+'use client';
+
+import { createStyles, keyframes } from '@mantine/emotion';
+import {
+  type ReactNode,
+  createContext,
+  useCallback,
+  useContext,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
+import { createPortal } from 'react-dom';
+
+export type VRPilotHighlightRole =
+  | 'any'
+  | 'button'
+  | 'checkbox'
+  | 'heading'
+  | 'input'
+  | 'link'
+  | 'menuitem'
+  | 'radio'
+  | 'select'
+  | 'tab';
+
+export type VRPilotHighlightTargetRequest = {
+  targetKey?: string;
+  selector?: string;
+  text?: string;
+  label?: string;
+  role?: VRPilotHighlightRole;
+  reason?: string;
+  durationMs?: number;
+  scrollIntoView?: boolean;
+};
+
+export type VRPilotFillFieldMode = 'replace' | 'append';
+
+export type VRPilotFillFieldRequest = Omit<
+  VRPilotHighlightTargetRequest,
+  'durationMs'
+> & {
+  value?: string;
+  checked?: boolean;
+  mode?: VRPilotFillFieldMode;
+};
+
+export type VRPilotHighlightResult = {
+  ok: boolean;
+  message: string;
+  targetDescription?: string;
+};
+
+export type VRPilotFillFieldResult = VRPilotHighlightResult & {
+  appliedValue?: string;
+};
+
+type HighlightRect = {
+  top: number;
+  left: number;
+  width: number;
+  height: number;
+};
+
+type ActiveHighlight = {
+  rect: HighlightRect;
+  label?: string;
+  reason?: string;
+};
+
+type VRPilotHighlightContextValue = {
+  highlightTarget: (
+    request: VRPilotHighlightTargetRequest
+  ) => VRPilotHighlightResult;
+  fillField: (request: VRPilotFillFieldRequest) => VRPilotFillFieldResult;
+  clearHighlight: () => void;
+};
+
+const highlightPulse = keyframes({
+  '0%, 100%': {
+    boxShadow:
+      '0 0 0 3px rgba(27, 105, 222, 0.44), 0 0 0 10px rgba(27, 105, 222, 0.18)',
+  },
+  '50%': {
+    boxShadow:
+      '0 0 0 4px rgba(27, 105, 222, 0.72), 0 0 0 16px rgba(27, 105, 222, 0.08)',
+  },
+});
+
+const useStyles = createStyles((theme) => ({
+  root: {
+    position: 'fixed',
+    inset: 0,
+    pointerEvents: 'none',
+    zIndex: 2_147_482_900,
+  },
+
+  ring: {
+    position: 'fixed',
+    border: `3px solid ${theme.colors.vrplatform[5]}`,
+    borderRadius: theme.radius.md,
+    background: 'rgba(27, 105, 222, 0.08)',
+    transition:
+      'top 120ms ease, left 120ms ease, width 120ms ease, height 120ms ease',
+    animation: `${highlightPulse} 1.1s ease-in-out infinite`,
+  },
+
+  label: {
+    position: 'fixed',
+    maxWidth: 320,
+    padding: '6px 10px',
+    borderRadius: theme.radius.sm,
+    background: theme.colors.vrplatform[9],
+    boxShadow: '0 12px 28px rgba(15, 23, 42, 0.24)',
+    color: theme.white,
+    fontSize: 12,
+    fontWeight: 700,
+    lineHeight: 1.2,
+    whiteSpace: 'nowrap',
+    overflow: 'hidden',
+    textOverflow: 'ellipsis',
+  },
+
+  '@media (prefers-reduced-motion: reduce)': {
+    ring: {
+      animation: 'none',
+    },
+  },
+}));
+
+const defaultHighlightContext: VRPilotHighlightContextValue = {
+  highlightTarget: () => ({
+    ok: false,
+    message: 'ChatVRT highlight provider is not mounted.',
+  }),
+  fillField: () => ({
+    ok: false,
+    message: 'ChatVRT highlight provider is not mounted.',
+  }),
+  clearHighlight: () => undefined,
+};
+
+const VRPilotHighlightContext = createContext<VRPilotHighlightContextValue>(
+  defaultHighlightContext
+);
+
+const interactiveSelector = [
+  'button',
+  'a[href]',
+  'input',
+  'select',
+  'textarea',
+  '[role="button"]',
+  '[role="checkbox"]',
+  '[role="link"]',
+  '[role="menuitem"]',
+  '[role="tab"]',
+  '[role="switch"]',
+  '[aria-label]',
+  '[data-testid]',
+  '[data-vrpilot-target]',
+].join(',');
+
+const formFieldSelector = [
+  'input:not([type="hidden"])',
+  'select',
+  'textarea',
+  '[contenteditable="true"]',
+].join(',');
+
+const blockedInputTypes = new Set([
+  'button',
+  'file',
+  'hidden',
+  'image',
+  'password',
+  'reset',
+  'submit',
+]);
+
+const sensitiveFieldPattern =
+  /\b(password|passwort|secret|token|api\s*key|credential|credit\s*card|card\s*number|cvv|cvc|iban|ssn|social\s*security|tax\s*id|bank\s*account|routing\s*number)\b/i;
+
+function getCssEscape() {
+  if (typeof CSS !== 'undefined' && typeof CSS.escape === 'function') {
+    return CSS.escape;
+  }
+
+  return (value: string) => value.replace(/[^a-zA-Z0-9_-]/g, '\\$&');
+}
+
+function escapeAttributeValue(value: string) {
+  return value.replace(/\\/g, '\\\\').replace(/"/g, '\\"');
+}
+
+function normalizeText(value: string) {
+  return value.trim().replace(/\s+/g, ' ').toLowerCase();
+}
+
+function getVisibleRect(element: Element): HighlightRect | null {
+  const rect = element.getBoundingClientRect();
+
+  if (rect.width <= 0 || rect.height <= 0) {
+    return null;
+  }
+
+  if (
+    rect.bottom < 0 ||
+    rect.right < 0 ||
+    rect.top > window.innerHeight ||
+    rect.left > window.innerWidth
+  ) {
+    return null;
+  }
+
+  const padding = 6;
+
+  return {
+    top: Math.max(8, rect.top - padding),
+    left: Math.max(8, rect.left - padding),
+    width: Math.min(window.innerWidth - 16, rect.width + padding * 2),
+    height: Math.min(window.innerHeight - 16, rect.height + padding * 2),
+  };
+}
+
+function isVisibleElement(element: Element) {
+  return Boolean(getVisibleRect(element));
+}
+
+function queryElement(selector: string) {
+  try {
+    return document.querySelector(selector);
+  } catch {
+    return null;
+  }
+}
+
+function getRoleSelector(role?: VRPilotHighlightRole) {
+  if (!role || role === 'any') {
+    return interactiveSelector;
+  }
+
+  if (role === 'button') {
+    return 'button,[role="button"],input[type="button"],input[type="submit"]';
+  }
+
+  if (role === 'checkbox') {
+    return 'input[type="checkbox"],[role="checkbox"],[role="switch"]';
+  }
+
+  if (role === 'heading') {
+    return 'h1,h2,h3,h4,h5,h6,[role="heading"]';
+  }
+
+  if (role === 'input') {
+    return 'input,select,textarea,[role="textbox"],[contenteditable="true"]';
+  }
+
+  if (role === 'link') {
+    return 'a[href],[role="link"]';
+  }
+
+  if (role === 'menuitem') {
+    return '[role="menuitem"],[role="menuitemradio"],[role="menuitemcheckbox"]';
+  }
+
+  if (role === 'radio') {
+    return 'input[type="radio"],[role="radio"]';
+  }
+
+  if (role === 'select') {
+    return 'select,[role="combobox"],[role="listbox"]';
+  }
+
+  if (role === 'tab') {
+    return '[role="tab"]';
+  }
+
+  return interactiveSelector;
+}
+
+function getElementText(element: Element) {
+  return normalizeText(
+    [
+      element.getAttribute('aria-label'),
+      getAssociatedLabelText(element),
+      element.getAttribute('title'),
+      element.getAttribute('placeholder'),
+      element.getAttribute('name'),
+      element.getAttribute('id'),
+      element.getAttribute('data-testid'),
+      element.textContent,
+    ]
+      .filter((value): value is string => typeof value === 'string')
+      .join(' ')
+  );
+}
+
+function getAssociatedLabelText(element: Element) {
+  const labels: string[] = [];
+
+  if (
+    element instanceof HTMLInputElement ||
+    element instanceof HTMLTextAreaElement ||
+    element instanceof HTMLSelectElement
+  ) {
+    for (const label of Array.from(element.labels ?? [])) {
+      labels.push(label.textContent ?? '');
+    }
+  }
+
+  const id = element.getAttribute('id');
+  if (id) {
+    const attributeValue = escapeAttributeValue(id);
+    for (const label of Array.from(
+      document.querySelectorAll(`label[for="${attributeValue}"]`)
+    )) {
+      labels.push(label.textContent ?? '');
+    }
+  }
+
+  const labelledBy = element.getAttribute('aria-labelledby');
+  if (labelledBy) {
+    for (const labelId of labelledBy.split(/\s+/)) {
+      const labelElement = document.getElementById(labelId);
+      labels.push(labelElement?.textContent ?? '');
+    }
+  }
+
+  labels.push(element.closest('label')?.textContent ?? '');
+
+  return labels.filter(Boolean).join(' ');
+}
+
+function findByText(request: VRPilotHighlightTargetRequest) {
+  const rawNeedle = request.label ?? request.text;
+  if (!rawNeedle) {
+    return null;
+  }
+
+  const needle = normalizeText(rawNeedle);
+  if (!needle) {
+    return null;
+  }
+
+  const candidates = Array.from(
+    document.querySelectorAll(getRoleSelector(request.role))
+  );
+
+  const matches = candidates.filter((element) => {
+    const haystack = getElementText(element);
+
+    return haystack === needle || haystack.includes(needle);
+  });
+
+  return (
+    matches.find((element) => isVisibleElement(element)) ?? matches[0] ?? null
+  );
+}
+
+function describeElement(
+  element: Element,
+  request: VRPilotHighlightTargetRequest
+) {
+  return (
+    request.label ??
+    request.text ??
+    element.getAttribute('aria-label') ??
+    element.getAttribute('title') ??
+    element.getAttribute('data-vrpilot-target') ??
+    element.getAttribute('data-testid') ??
+    element.textContent?.trim().replace(/\s+/g, ' ').slice(0, 80) ??
+    element.tagName.toLowerCase()
+  );
+}
+
+function resolveHighlightElement(request: VRPilotHighlightTargetRequest) {
+  const cssEscape = getCssEscape();
+  const selectors: string[] = [];
+
+  if (request.targetKey) {
+    const attributeValue = escapeAttributeValue(request.targetKey);
+    selectors.push(`[data-vrpilot-target="${attributeValue}"]`);
+    selectors.push(`[data-testid="${attributeValue}"]`);
+    selectors.push(`[data-test="${attributeValue}"]`);
+    selectors.push(`#${cssEscape(request.targetKey)}`);
+  }
+
+  if (request.selector) {
+    selectors.push(request.selector);
+  }
+
+  if (request.label) {
+    const attributeValue = escapeAttributeValue(request.label);
+    selectors.push(`[aria-label="${attributeValue}"]`);
+    selectors.push(`[title="${attributeValue}"]`);
+  }
+
+  for (const selector of selectors) {
+    const element = queryElement(selector);
+    if (element) {
+      return element;
+    }
+  }
+
+  return findByText(request);
+}
+
+function getFillRoleSelector(role?: VRPilotHighlightRole) {
+  if (role === 'checkbox') {
+    return 'input[type="checkbox"]';
+  }
+
+  if (role === 'radio') {
+    return 'input[type="radio"]';
+  }
+
+  if (role === 'select') {
+    return 'select';
+  }
+
+  return formFieldSelector;
+}
+
+function getFillControl(element: Element): Element | null {
+  if (isSupportedFillField(element)) {
+    return element;
+  }
+
+  return element.querySelector(formFieldSelector);
+}
+
+function findFieldByText(request: VRPilotFillFieldRequest) {
+  const rawNeedle = request.label ?? request.text;
+  if (!rawNeedle) {
+    return null;
+  }
+
+  const needle = normalizeText(rawNeedle);
+  if (!needle) {
+    return null;
+  }
+
+  const candidates = Array.from(
+    document.querySelectorAll(getFillRoleSelector(request.role))
+  );
+
+  const matches = candidates.filter((element) => {
+    const haystack = getElementText(element);
+
+    return haystack === needle || haystack.includes(needle);
+  });
+
+  return (
+    matches.find((element) => isVisibleElement(element)) ?? matches[0] ?? null
+  );
+}
+
+function resolveFillElement(request: VRPilotFillFieldRequest) {
+  const cssEscape = getCssEscape();
+  const selectors: string[] = [];
+
+  if (request.targetKey) {
+    const attributeValue = escapeAttributeValue(request.targetKey);
+    selectors.push(`[data-vrpilot-target="${attributeValue}"]`);
+    selectors.push(`[data-testid="${attributeValue}"]`);
+    selectors.push(`[data-test="${attributeValue}"]`);
+    selectors.push(`#${cssEscape(request.targetKey)}`);
+  }
+
+  if (request.selector) {
+    selectors.push(request.selector);
+  }
+
+  if (request.label) {
+    const attributeValue = escapeAttributeValue(request.label);
+    selectors.push(`[aria-label="${attributeValue}"]`);
+    selectors.push(`[title="${attributeValue}"]`);
+  }
+
+  for (const selector of selectors) {
+    const element = queryElement(selector);
+    const field = element ? getFillControl(element) : null;
+
+    if (field) {
+      return field;
+    }
+  }
+
+  return findFieldByText(request);
+}
+
+function isSupportedFillField(element: Element) {
+  return (
+    element instanceof HTMLInputElement ||
+    element instanceof HTMLTextAreaElement ||
+    element instanceof HTMLSelectElement ||
+    (element instanceof HTMLElement && element.isContentEditable)
+  );
+}
+
+function isBlockedFillField(element: Element) {
+  if (element instanceof HTMLInputElement) {
+    const type = element.type.toLowerCase();
+    if (blockedInputTypes.has(type)) {
+      return true;
+    }
+  }
+
+  return sensitiveFieldPattern.test(getElementText(element));
+}
+
+function getBooleanIntent(value?: string, checked?: boolean) {
+  if (typeof checked === 'boolean') {
+    return checked;
+  }
+
+  if (!value) {
+    return undefined;
+  }
+
+  const normalized = normalizeText(value);
+  if (['true', 'yes', 'on', 'checked', 'selected'].includes(normalized)) {
+    return true;
+  }
+
+  if (['false', 'no', 'off', 'unchecked', 'cleared'].includes(normalized)) {
+    return false;
+  }
+
+  return undefined;
+}
+
+function setNativeInputValue(
+  element: HTMLInputElement | HTMLTextAreaElement,
+  value: string
+) {
+  const prototype = Object.getPrototypeOf(element) as
+    | HTMLInputElement
+    | HTMLTextAreaElement;
+  const descriptor = Object.getOwnPropertyDescriptor(prototype, 'value');
+
+  if (descriptor?.set) {
+    descriptor.set.call(element, value);
+    return;
+  }
+
+  element.value = value;
+}
+
+function setNativeCheckedValue(element: HTMLInputElement, checked: boolean) {
+  const descriptor = Object.getOwnPropertyDescriptor(
+    HTMLInputElement.prototype,
+    'checked'
+  );
+
+  if (descriptor?.set) {
+    descriptor.set.call(element, checked);
+    return;
+  }
+
+  element.checked = checked;
+}
+
+function dispatchFieldEvents(element: EventTarget) {
+  element.dispatchEvent(new Event('input', { bubbles: true }));
+  element.dispatchEvent(new Event('change', { bubbles: true }));
+}
+
+function getSelectOption(select: HTMLSelectElement, value: string) {
+  const normalizedValue = normalizeText(value);
+  const options = Array.from(select.options);
+
+  return (
+    options.find((option) => normalizeText(option.value) === normalizedValue) ??
+    options.find(
+      (option) => normalizeText(option.textContent ?? '') === normalizedValue
+    ) ??
+    options.find((option) =>
+      normalizeText(option.textContent ?? '').includes(normalizedValue)
+    ) ??
+    null
+  );
+}
+
+function applyFieldValue(
+  element: Element,
+  request: VRPilotFillFieldRequest
+): VRPilotFillFieldResult {
+  const targetDescription = describeElement(element, request);
+  const mode = request.mode === 'append' ? 'append' : 'replace';
+
+  if (isBlockedFillField(element)) {
+    return {
+      ok: false,
+      message: 'This field is blocked because it looks sensitive or unsafe.',
+      targetDescription,
+    };
+  }
+
+  if (element instanceof HTMLInputElement) {
+    const type = element.type.toLowerCase();
+
+    if (type === 'checkbox' || type === 'radio') {
+      const checked = getBooleanIntent(request.value, request.checked);
+      if (checked === undefined) {
+        return {
+          ok: false,
+          message: 'A checked value is required for this field.',
+          targetDescription,
+        };
+      }
+
+      setNativeCheckedValue(element, checked);
+      dispatchFieldEvents(element);
+
+      return {
+        ok: true,
+        message: 'Updated the matching form field.',
+        appliedValue: String(checked),
+        targetDescription,
+      };
+    }
+
+    if (request.value === undefined) {
+      return {
+        ok: false,
+        message: 'A value is required for this field.',
+        targetDescription,
+      };
+    }
+
+    const nextValue =
+      mode === 'append' ? `${element.value}${request.value}` : request.value;
+    setNativeInputValue(element, nextValue);
+    dispatchFieldEvents(element);
+
+    return {
+      ok: true,
+      message: 'Updated the matching form field.',
+      appliedValue: nextValue,
+      targetDescription,
+    };
+  }
+
+  if (element instanceof HTMLTextAreaElement) {
+    if (request.value === undefined) {
+      return {
+        ok: false,
+        message: 'A value is required for this field.',
+        targetDescription,
+      };
+    }
+
+    const nextValue =
+      mode === 'append' ? `${element.value}${request.value}` : request.value;
+    setNativeInputValue(element, nextValue);
+    dispatchFieldEvents(element);
+
+    return {
+      ok: true,
+      message: 'Updated the matching form field.',
+      appliedValue: nextValue,
+      targetDescription,
+    };
+  }
+
+  if (element instanceof HTMLSelectElement) {
+    if (request.value === undefined) {
+      return {
+        ok: false,
+        message: 'A value is required for this field.',
+        targetDescription,
+      };
+    }
+
+    const option = getSelectOption(element, request.value);
+    if (!option) {
+      return {
+        ok: false,
+        message: 'No matching option was found for this select field.',
+        targetDescription,
+      };
+    }
+
+    element.value = option.value;
+    dispatchFieldEvents(element);
+
+    return {
+      ok: true,
+      message: 'Updated the matching form field.',
+      appliedValue: option.value,
+      targetDescription,
+    };
+  }
+
+  if (element instanceof HTMLElement && element.isContentEditable) {
+    if (request.value === undefined) {
+      return {
+        ok: false,
+        message: 'A value is required for this field.',
+        targetDescription,
+      };
+    }
+
+    const currentValue = element.textContent ?? '';
+    const nextValue =
+      mode === 'append' ? `${currentValue}${request.value}` : request.value;
+    element.textContent = nextValue;
+    dispatchFieldEvents(element);
+
+    return {
+      ok: true,
+      message: 'Updated the matching editable field.',
+      appliedValue: nextValue,
+      targetDescription,
+    };
+  }
+
+  return {
+    ok: false,
+    message: 'The matching UI target is not a supported editable field.',
+    targetDescription,
+  };
+}
+
+function clampDuration(durationMs?: number) {
+  if (!Number.isFinite(durationMs)) {
+    return 5_000;
+  }
+
+  return Math.max(1_200, Math.min(12_000, Math.round(durationMs ?? 5_000)));
+}
+
+export function VRPilotHighlightProvider({
+  children,
+}: {
+  children: ReactNode;
+}) {
+  const { classes } = useStyles();
+  const activeElementRef = useRef<Element | null>(null);
+  const timeoutRef = useRef<number | null>(null);
+  const [activeHighlight, setActiveHighlight] =
+    useState<ActiveHighlight | null>(null);
+
+  const clearHighlight = useCallback(() => {
+    if (timeoutRef.current !== null) {
+      window.clearTimeout(timeoutRef.current);
+      timeoutRef.current = null;
+    }
+
+    activeElementRef.current = null;
+    setActiveHighlight(null);
+  }, []);
+
+  const updateHighlightRect = useCallback(() => {
+    const element = activeElementRef.current;
+    if (!element) {
+      return;
+    }
+
+    const rect = getVisibleRect(element);
+    if (!rect) {
+      clearHighlight();
+      return;
+    }
+
+    setActiveHighlight((current) => (current ? { ...current, rect } : current));
+  }, [clearHighlight]);
+
+  const highlightTarget = useCallback(
+    (request: VRPilotHighlightTargetRequest): VRPilotHighlightResult => {
+      const element = resolveHighlightElement(request);
+
+      if (!element) {
+        return {
+          ok: false,
+          message: 'No visible matching UI target was found.',
+        };
+      }
+
+      if (request.scrollIntoView !== false) {
+        element.scrollIntoView({
+          block: 'center',
+          inline: 'nearest',
+          behavior: 'auto',
+        });
+      }
+
+      const rect = getVisibleRect(element);
+      if (!rect) {
+        return {
+          ok: false,
+          message: 'The matching UI target is not visible.',
+        };
+      }
+
+      const targetDescription = describeElement(element, request);
+
+      if (timeoutRef.current !== null) {
+        window.clearTimeout(timeoutRef.current);
+      }
+
+      activeElementRef.current = element;
+      setActiveHighlight({
+        rect,
+        label: targetDescription,
+        reason: request.reason,
+      });
+      window.setTimeout(updateHighlightRect, 180);
+      timeoutRef.current = window.setTimeout(
+        clearHighlight,
+        clampDuration(request.durationMs)
+      );
+
+      return {
+        ok: true,
+        message: 'Highlighted the matching UI target.',
+        targetDescription,
+      };
+    },
+    [clearHighlight, updateHighlightRect]
+  );
+
+  const fillField = useCallback(
+    (request: VRPilotFillFieldRequest): VRPilotFillFieldResult => {
+      const element = resolveFillElement(request);
+
+      if (!element) {
+        return {
+          ok: false,
+          message: 'No matching editable form field was found.',
+        };
+      }
+
+      if (request.scrollIntoView !== false) {
+        element.scrollIntoView({
+          block: 'center',
+          inline: 'nearest',
+          behavior: 'auto',
+        });
+      }
+
+      const rect = getVisibleRect(element);
+      if (!rect) {
+        return {
+          ok: false,
+          message: 'The matching form field is not visible.',
+        };
+      }
+
+      const result = applyFieldValue(element, request);
+      if (!result.ok) {
+        return result;
+      }
+
+      if (timeoutRef.current !== null) {
+        window.clearTimeout(timeoutRef.current);
+      }
+
+      activeElementRef.current = element;
+      setActiveHighlight({
+        rect,
+        label: result.targetDescription,
+        reason: request.reason,
+      });
+      window.setTimeout(updateHighlightRect, 180);
+      timeoutRef.current = window.setTimeout(clearHighlight, 3_000);
+
+      return result;
+    },
+    [clearHighlight, updateHighlightRect]
+  );
+
+  useEffect(() => {
+    if (!activeHighlight) {
+      return;
+    }
+
+    window.addEventListener('resize', updateHighlightRect);
+    window.addEventListener('scroll', updateHighlightRect, true);
+
+    return () => {
+      window.removeEventListener('resize', updateHighlightRect);
+      window.removeEventListener('scroll', updateHighlightRect, true);
+    };
+  }, [activeHighlight, updateHighlightRect]);
+
+  useEffect(() => clearHighlight, [clearHighlight]);
+
+  const value = useMemo(
+    () => ({
+      clearHighlight,
+      fillField,
+      highlightTarget,
+    }),
+    [clearHighlight, fillField, highlightTarget]
+  );
+
+  const overlay =
+    activeHighlight && typeof document !== 'undefined'
+      ? createPortal(
+          <div className={classes.root} aria-hidden="true">
+            <div
+              className={classes.ring}
+              style={{
+                top: activeHighlight.rect.top,
+                left: activeHighlight.rect.left,
+                width: activeHighlight.rect.width,
+                height: activeHighlight.rect.height,
+              }}
+            />
+            {activeHighlight.label ? (
+              <div
+                className={classes.label}
+                style={{
+                  top: Math.max(8, activeHighlight.rect.top - 34),
+                  left: activeHighlight.rect.left,
+                }}
+                title={activeHighlight.reason}
+              >
+                {activeHighlight.label}
+              </div>
+            ) : null}
+          </div>,
+          document.body
+        )
+      : null;
+
+  return (
+    <VRPilotHighlightContext.Provider value={value}>
+      {children}
+      {overlay}
+    </VRPilotHighlightContext.Provider>
+  );
+}
+
+export function useVRPilotHighlights() {
+  return useContext(VRPilotHighlightContext);
+}