@blario/react-native 0.0.0 → 0.1.1

package/src/snapshot/collect.ts

@@ -0,0 +1,136 @@
+import { childrenOf, componentName, firstHostDescendant, isHostComponent, propsOf } from '../fiber/reader.ts';
+import { collectText } from '../fiber/text.ts';
+import type { Fiber } from '../fiber/types.ts';
+import { classify } from './classify.ts';
+import type { ElementKind } from './kinds.ts';
+import { isFocusedScreen, type ScreenRef, screenOf } from './navigation.ts';
+import { roleOf } from './properties.ts';
+
+export const AGENT_OVERLAY_TEST_ID = 'blar-agent-overlay';
+
+export interface Candidate {
+  kind: ElementKind;
+  fiber: Fiber;
+  host: Fiber;
+  ancestors: Fiber[];
+  scrollContainers: Fiber[];
+}
+
+const MODAL_COMPONENT_NAME = 'Modal';
+const TEXT_HOST_TYPE = 'RCTText';
+const TEXT_BLOCK_LIMIT = 800;
+const HEADING_ROLES: readonly string[] = ['header', 'heading'];
+
+export interface TextBlock {
+  host: Fiber;
+  text: string;
+  heading: boolean;
+  ancestors: Fiber[];
+  scrollContainers: Fiber[];
+}
+
+export interface Collected {
+  candidates: Candidate[];
+  textBlocks: TextBlock[];
+  focusedScreens: ScreenRef[];
+  modalOpen: boolean;
+}
+
+export function collect(root: Fiber): Collected {
+  const candidates: Candidate[] = [];
+  const textBlocks: TextBlock[] = [];
+  const focusedScreens = new Map<string, ScreenRef>();
+  const ancestors: Fiber[] = [];
+  const scrollContainers: Fiber[] = [];
+  const openModals: Fiber[] = [];
+
+  const visit = (fiber: Fiber): void => {
+    const props = propsOf(fiber);
+    if (props.testID === AGENT_OVERLAY_TEST_ID) {
+      return;
+    }
+    const screen = screenOf(props);
+    if (screen !== null) {
+      if (!isFocusedScreen(screen)) {
+        return;
+      }
+      if (!focusedScreens.has(screen.key)) {
+        focusedScreens.set(screen.key, screen);
+      }
+    }
+    if (isOpenModal(fiber)) {
+      openModals.push(fiber);
+    }
+    const kind = classify(fiber);
+    const host = kind === null ? null : firstHostDescendant(fiber);
+    if (kind !== null && host !== null) {
+      candidates.push({
+        kind,
+        fiber,
+        host,
+        ancestors: [...ancestors],
+        scrollContainers: [...scrollContainers],
+      });
+    }
+    const block = readTextBlock(fiber, ancestors, scrollContainers);
+    if (block !== null) {
+      textBlocks.push(block);
+    }
+    ancestors.push(fiber);
+    if (kind === 'scroll') {
+      scrollContainers.push(fiber);
+    }
+    for (const child of childrenOf(fiber)) {
+      visit(child);
+    }
+    if (kind === 'scroll') {
+      scrollContainers.pop();
+    }
+    ancestors.pop();
+  };
+
+  visit(root);
+  const frontModal = openModals[openModals.length - 1];
+  const inFront = (entry: { ancestors: Fiber[] }): boolean => frontModal === undefined || entry.ancestors.includes(frontModal);
+  return {
+    candidates: candidates.filter(inFront),
+    textBlocks: textBlocks.filter(inFront),
+    focusedScreens: [...focusedScreens.values()],
+    modalOpen: frontModal !== undefined,
+  };
+}
+
+function readTextBlock(fiber: Fiber, ancestors: Fiber[], scrollContainers: Fiber[]): TextBlock | null {
+  if (!isHostComponent(fiber) || fiber.type !== TEXT_HOST_TYPE) {
+    return null;
+  }
+  const text = collectText(fiber, TEXT_BLOCK_LIMIT);
+  if (text.length === 0) {
+    return null;
+  }
+  const role = roleOf(propsOf(fiber));
+  return {
+    host: fiber,
+    text,
+    heading: role !== null && HEADING_ROLES.includes(role),
+    ancestors: [...ancestors],
+    scrollContainers: [...scrollContainers],
+  };
+}
+
+export function isOpenModal(fiber: Fiber): boolean {
+  return componentName(fiber) === MODAL_COMPONENT_NAME && fiber.child !== null && propsOf(fiber).visible !== false;
+}
+
+export function keepInnermostPerHost(candidates: Candidate[]): Candidate[] {
+  const actionsByHost = new Map<Fiber, Candidate>();
+  const scrollsByHost = new Map<Fiber, Candidate>();
+  for (const candidate of candidates) {
+    const byHost = candidate.kind === 'scroll' ? scrollsByHost : actionsByHost;
+    const existing = byHost.get(candidate.host);
+    if (existing === undefined || candidate.ancestors.length > existing.ancestors.length) {
+      byHost.set(candidate.host, candidate);
+    }
+  }
+  return [...actionsByHost.values(), ...scrollsByHost.values()];
+}

package/src/snapshot/element-context.ts

@@ -0,0 +1,66 @@
+import type { ElementContextItem } from '../agent/frames.ts';
+import type { TargetResolver } from '../actions/target.ts';
+import { childrenOf, propsOf } from '../fiber/reader.ts';
+import { collectText, precedingText } from '../fiber/text.ts';
+import type { Fiber } from '../fiber/types.ts';
+import { measureHost } from '../host/measure.ts';
+import { isVisibleIn, type Size } from '../host/rect.ts';
+import { placeholderOf } from './properties.ts';
+import { renderLine } from './render.ts';
+import { buildView } from './view.ts';
+
+const TEXT_LIMIT = 300;
+const NEARBY_LIMIT = 60;
+const ANCESTOR_LEVELS = 3;
+const SIBLING_ENTRIES = 8;
+
+const TAG_BY_KIND = { button: 'button', text_input: 'input', switch: 'input', scroll: 'scroll' } as const;
+
+function siblingTexts(ancestors: Fiber[], fiber: Fiber): string[] {
+  const texts: string[] = [];
+  let branch = fiber;
+  for (let depth = ancestors.length - 1; depth >= Math.max(0, ancestors.length - ANCESTOR_LEVELS); depth -= 1) {
+    const parent = ancestors[depth];
+    if (parent === undefined) {
+      break;
+    }
+    for (const sibling of childrenOf(parent)) {
+      const text = sibling === branch ? '' : collectText(sibling, NEARBY_LIMIT);
+      if (text.length > 0 && !texts.includes(text)) {
+        texts.push(text);
+      }
+    }
+    branch = parent;
+  }
+  return texts.slice(0, SIBLING_ENTRIES);
+}
+
+export class ElementContextReader {
+  constructor(
+    private readonly resolver: TargetResolver,
+    private readonly getViewport: () => Size,
+  ) {}
+
+  async read(agentId: string): Promise<ElementContextItem> {
+    const target = this.resolver.resolveAgentId(agentId);
+    if (target === null) {
+      return { agent_id: agentId, found: false };
+    }
+    const measured = target.host === null ? null : await measureHost(target.host);
+    const rect = measured ?? target.element.rect;
+    const view = buildView({ kind: target.element.kind, fiber: target.fiber, ancestors: target.ancestors, rect, scroll: null });
+    const placeholder = placeholderOf(propsOf(target.fiber));
+    return {
+      agent_id: agentId,
+      found: true,
+      tag_name: TAG_BY_KIND[target.element.kind],
+      visible: isVisibleIn(rect, this.getViewport()),
+      line: renderLine(view, agentId, 0),
+      bounding_box: { x: rect.x, y: rect.y, width: rect.width, height: rect.height },
+      text_content: collectText(target.fiber, TEXT_LIMIT),
+      ...(placeholder === null ? {} : { placeholder }),
+      nearest_label: precedingText(target.ancestors, target.fiber, NEARBY_LIMIT),
+      sibling_text: siblingTexts(target.ancestors, target.fiber),
+    };
+  }
+}

package/src/snapshot/icon.ts

@@ -0,0 +1,21 @@
+import { nonEmptyString } from '../fiber/narrow.ts';
+import { childrenOf, propsOf } from '../fiber/reader.ts';
+import type { Fiber } from '../fiber/types.ts';
+
+function isIconProps(props: Readonly<Record<string, unknown>>): boolean {
+  return nonEmptyString(props.name) !== null && (typeof props.size === 'number' || typeof props.color === 'string');
+}
+
+export function iconNameIn(fiber: Fiber): string | null {
+  const props = propsOf(fiber);
+  if (typeof fiber.type !== 'string' && isIconProps(props)) {
+    return nonEmptyString(props.name);
+  }
+  for (const child of childrenOf(fiber)) {
+    const found = iconNameIn(child);
+    if (found !== null) {
+      return found;
+    }
+  }
+  return null;
+}

package/src/snapshot/kinds.ts

@@ -0,0 +1,10 @@
+export type ElementKind = 'button' | 'text_input' | 'switch' | 'scroll';
+
+export type IdPrefix = 'btn' | 'inp' | 'scr';
+
+export const ID_PREFIX_BY_KIND: Readonly<Record<ElementKind, IdPrefix>> = {
+  button: 'btn',
+  text_input: 'inp',
+  switch: 'inp',
+  scroll: 'scr',
+};

package/src/snapshot/modals.ts

@@ -0,0 +1,21 @@
+import { childrenOf, propsOf } from '../fiber/reader.ts';
+import type { Fiber } from '../fiber/types.ts';
+import { AGENT_OVERLAY_TEST_ID, isOpenModal } from './collect.ts';
+
+export function countOpenModals(fiber: Fiber): number {
+  const pending = [fiber];
+  let count = 0;
+  while (pending.length > 0) {
+    const current = pending.pop();
+    if (current === undefined || propsOf(current).testID === AGENT_OVERLAY_TEST_ID) {
+      continue;
+    }
+    if (isOpenModal(current)) {
+      count += 1;
+    }
+    for (const child of childrenOf(current)) {
+      pending.push(child);
+    }
+  }
+  return count;
+}

package/src/snapshot/navigation.ts

@@ -0,0 +1,47 @@
+import { isFunction, isRecord, nonEmptyString } from '../fiber/narrow.ts';
+import type { Props } from '../fiber/types.ts';
+
+export interface NavigationLike {
+  navigate: (...args: unknown[]) => void;
+  isFocused: () => boolean;
+  getState?: () => unknown;
+}
+
+export interface ScreenRef {
+  key: string;
+  name: string;
+  navigation: NavigationLike;
+}
+
+export function screenOf(props: Props): ScreenRef | null {
+  const { route, navigation } = props;
+  if (!isRecord(route) || !isRecord(navigation)) {
+    return null;
+  }
+  const key = nonEmptyString(route.key);
+  const name = nonEmptyString(route.name);
+  if (key === null || name === null || !isFunction(navigation.navigate) || !isFunction(navigation.isFocused)) {
+    return null;
+  }
+  return { key, name, navigation: navigation as unknown as NavigationLike };
+}
+
+export function isFocusedScreen(screen: ScreenRef): boolean {
+  try {
+    return screen.navigation.isFocused();
+  } catch {
+    return true;
+  }
+}
+
+export function routeNamesOf(navigation: NavigationLike): string[] {
+  try {
+    const state = navigation.getState?.();
+    if (!isRecord(state) || !Array.isArray(state.routeNames)) {
+      return [];
+    }
+    return state.routeNames.filter((name): name is string => typeof name === 'string');
+  } catch {
+    return [];
+  }
+}

package/src/snapshot/ordering.ts

@@ -0,0 +1,26 @@
+import type { MeasuredCandidate } from './wrappers.ts';
+
+export function orderForReading(measured: MeasuredCandidate[]): MeasuredCandidate[] {
+  const sorted = [...measured].sort((left, right) => left.rect.y - right.rect.y || left.rect.x - right.rect.x);
+  const scrollEntries = new Map(
+    sorted.filter((entry) => entry.candidate.kind === 'scroll').map((entry) => [entry.candidate.fiber, entry] as const),
+  );
+  const ordered: MeasuredCandidate[] = [];
+  const emitted = new Set<MeasuredCandidate>();
+  const emit = (entry: MeasuredCandidate): void => {
+    if (!emitted.has(entry)) {
+      emitted.add(entry);
+      ordered.push(entry);
+    }
+  };
+  for (const entry of sorted) {
+    for (const container of entry.candidate.scrollContainers) {
+      const scrollEntry = scrollEntries.get(container);
+      if (scrollEntry !== undefined) {
+        emit(scrollEntry);
+      }
+    }
+    emit(entry);
+  }
+  return ordered;
+}

package/src/snapshot/properties.ts

@@ -0,0 +1,71 @@
+import { isRecord, nonEmptyString } from '../fiber/narrow.ts';
+import type { Props } from '../fiber/types.ts';
+
+export interface AccessibilityFlags {
+  disabled: boolean;
+  selected: boolean | null;
+  expanded: boolean | null;
+  checked: boolean | null;
+}
+
+function booleanFrom(...candidates: unknown[]): boolean | null {
+  for (const candidate of candidates) {
+    if (typeof candidate === 'boolean') {
+      return candidate;
+    }
+  }
+  return null;
+}
+
+export function explicitLabelOf(props: Props): string | null {
+  return nonEmptyString(props['aria-label']) ?? nonEmptyString(props.accessibilityLabel);
+}
+
+export function testIdOf(props: Props): string | null {
+  return nonEmptyString(props.testID);
+}
+
+export function roleOf(props: Props): string | null {
+  return nonEmptyString(props.role) ?? nonEmptyString(props.accessibilityRole);
+}
+
+export function accessibilityFlagsOf(props: Props): AccessibilityFlags {
+  const state = isRecord(props.accessibilityState) ? props.accessibilityState : {};
+  return {
+    disabled: booleanFrom(props.disabled, props['aria-disabled'], state.disabled) === true,
+    selected: booleanFrom(props['aria-selected'], state.selected),
+    expanded: booleanFrom(props['aria-expanded'], state.expanded),
+    checked: booleanFrom(props['aria-checked'], state.checked),
+  };
+}
+
+export function inputTypeOf(props: Props): string {
+  if (props.secureTextEntry === true) {
+    return 'password';
+  }
+  switch (props.keyboardType) {
+    case 'numeric':
+    case 'number-pad':
+    case 'decimal-pad':
+      return 'number';
+    case 'email-address':
+      return 'email';
+    case 'phone-pad':
+      return 'tel';
+    case 'url':
+      return 'url';
+    default:
+      return 'text';
+  }
+}
+
+export function placeholderOf(props: Props): string | null {
+  return nonEmptyString(props.placeholder);
+}
+
+export function textValueOf(props: Props): string | null {
+  if (props.secureTextEntry === true) {
+    return null;
+  }
+  return nonEmptyString(props.value) ?? nonEmptyString(props.defaultValue);
+}

package/src/snapshot/registry.ts

@@ -0,0 +1,33 @@
+import type { Fiber } from '../fiber/types.ts';
+import type { Rect } from '../host/rect.ts';
+import { type ElementKind, ID_PREFIX_BY_KIND, type IdPrefix } from './kinds.ts';
+
+export interface RegisteredElement {
+  agentId: string;
+  kind: ElementKind;
+  fiber: Fiber;
+  rect: Rect;
+}
+
+export class ElementRegistry {
+  private counters: Record<IdPrefix, number> = { btn: 0, inp: 0, scr: 0 };
+
+  private entries: Map<string, RegisteredElement> = new Map();
+
+  begin(): void {
+    this.entries = new Map();
+  }
+
+  register(kind: ElementKind, fiber: Fiber, rect: Rect): RegisteredElement {
+    const prefix = ID_PREFIX_BY_KIND[kind];
+    const agentId = `${prefix}-${this.counters[prefix]}`;
+    this.counters[prefix] += 1;
+    const element: RegisteredElement = { agentId, kind, fiber, rect };
+    this.entries.set(agentId, element);
+    return element;
+  }
+
+  find(agentId: string): RegisteredElement | null {
+    return this.entries.get(agentId) ?? null;
+  }
+}

package/src/snapshot/render.ts

@@ -0,0 +1,140 @@
+import type { ElementView } from './view.ts';
+
+const ATTRIBUTE_LIMIT = 20;
+const BUTTON_TEXT_LIMIT = 80;
+
+type Attribute = readonly [string, string | null];
+
+export function clip(value: string, limit: number): string {
+  const collapsed = value.replace(/\s+/g, ' ').replace(/"/g, "'").trim();
+  return collapsed.length > limit ? `${collapsed.slice(0, limit)}…` : collapsed;
+}
+
+function flag(name: string, enabled: boolean): Attribute {
+  return [name, enabled ? '' : null];
+}
+
+function renderAttributes(attributes: Attribute[]): string {
+  return attributes
+    .filter((attribute): attribute is readonly [string, string] => attribute[1] !== null)
+    .map(([name, value]) => (value === '' ? name : `${name}=${clip(value, ATTRIBUTE_LIMIT)}`))
+    .filter((rendered) => rendered.length > 0)
+    .join(' ');
+}
+
+function openTag(tag: string, attributes: Attribute[]): string {
+  const rendered = renderAttributes(attributes);
+  return rendered.length > 0 ? `<${tag} ${rendered}` : `<${tag}`;
+}
+
+function textOrNull(value: string): string | null {
+  return value.length > 0 ? value : null;
+}
+
+function booleanText(value: boolean | null): string | null {
+  return value === null ? null : String(value);
+}
+
+function position(view: ElementView, twins: number): string | null {
+  return twins > 0 ? `${Math.round(view.rect.x)},${Math.round(view.rect.y)}` : null;
+}
+
+function commonStateAttributes(view: ElementView): Attribute[] {
+  return [
+    ['aria-expanded', booleanText(view.expanded)],
+    ['aria-selected', booleanText(view.selected)],
+    flag('disabled', view.disabled),
+  ];
+}
+
+function renderButton(view: ElementView, twins: number): string {
+  const tag = openTag('button', [
+    ['role', view.role],
+    ['testID', view.testID],
+    ['icon', view.icon],
+    ['offscreen', view.offscreen],
+    ...commonStateAttributes(view),
+    ['twins', twins > 0 ? String(twins) : null],
+    ['pos', position(view, twins)],
+  ]);
+  return `${tag}>${clip(view.label, BUTTON_TEXT_LIMIT)} />`;
+}
+
+function renderTextInput(view: ElementView, twins: number): string {
+  const label = view.placeholder !== null && view.label === view.placeholder ? '' : view.label;
+  const tag = openTag('input', [
+    ['type', view.type],
+    ['testID', view.testID],
+    ['offscreen', view.offscreen],
+    ['label', textOrNull(label)],
+    ['placeholder', view.placeholder],
+    ['value', view.value],
+    flag('disabled', view.disabled),
+    ['twins', twins > 0 ? String(twins) : null],
+    ['pos', position(view, twins)],
+  ]);
+  return `${tag} />`;
+}
+
+function renderSwitch(view: ElementView, twins: number): string {
+  const tag = openTag('input', [
+    ['type', view.type],
+    ['role', 'switch'],
+    ['testID', view.testID],
+    ['offscreen', view.offscreen],
+    ['label', textOrNull(view.label)],
+    ['checked', booleanText(view.checked)],
+    flag('disabled', view.disabled),
+    ['twins', twins > 0 ? String(twins) : null],
+    ['pos', position(view, twins)],
+  ]);
+  return `${tag} />`;
+}
+
+function renderScroll(view: ElementView): string {
+  const tag = openTag('scroll', [
+    ['testID', view.testID],
+    ['scroll', view.scroll],
+  ]);
+  return `${tag} />`;
+}
+
+function renderBody(view: ElementView, twins: number): string {
+  switch (view.kind) {
+    case 'button':
+      return renderButton(view, twins);
+    case 'text_input':
+      return renderTextInput(view, twins);
+    case 'switch':
+      return renderSwitch(view, twins);
+    case 'scroll':
+      return renderScroll(view);
+  }
+}
+
+export function twinSignature(view: ElementView): string {
+  return [view.kind, view.label, view.icon ?? '', view.role ?? ''].join('|');
+}
+
+export function countTwins(views: ElementView[]): Map<string, number> {
+  const counts = new Map<string, number>();
+  for (const view of views) {
+    const signature = twinSignature(view);
+    counts.set(signature, (counts.get(signature) ?? 0) + 1);
+  }
+  return counts;
+}
+
+export function renderLine(view: ElementView, agentId: string | null, twins: number): string {
+  const prefix = agentId === null ? '' : `[${agentId}]`;
+  return `${prefix}${renderBody(view, twins)}`;
+}
+
+export interface SnapshotHeader {
+  screen: string;
+  routes: string[];
+}
+
+export function renderSnapshotText(header: SnapshotHeader, lines: string[]): string {
+  return [`screen: ${header.screen}`, `routes: ${header.routes.join(', ')}`, '', ...lines].join('\n');
+}

package/src/snapshot/route-summary.ts

@@ -0,0 +1,15 @@
+import { routeNamesOf, type ScreenRef } from './navigation.ts';
+
+export function describeScreenPath(focusedScreens: ScreenRef[]): string {
+  return focusedScreens.map((screen) => screen.name).join('/');
+}
+
+export function describeRoutes(focusedScreens: ScreenRef[], extraPaths: string[]): string[] {
+  const paths = new Set<string>();
+  focusedScreens.forEach((screen, index) => {
+    const prefix = focusedScreens.slice(0, index).map((owner) => owner.name);
+    routeNamesOf(screen.navigation).forEach((name) => paths.add([...prefix, name].join('/')));
+  });
+  extraPaths.forEach((path) => paths.add(path));
+  return [...paths];
+}

package/src/snapshot/scroll.ts

@@ -0,0 +1,90 @@
+import { childrenOf, firstHostDescendant, isHostComponent, propsOf } from '../fiber/reader.ts';
+import type { Fiber } from '../fiber/types.ts';
+import { measureHost } from '../host/measure.ts';
+import type { Rect } from '../host/rect.ts';
+
+export type ScrollDirection = 'up' | 'down' | 'left' | 'right';
+
+export interface ScrollGeometry {
+  viewport: Rect;
+  content: Rect;
+  horizontal: boolean;
+}
+
+const SCROLL_TOLERANCE = 1;
+
+function findScrollHost(fiber: Fiber): Fiber | null {
+  const search = (node: Fiber): Fiber | null => {
+    if (isHostComponent(node) && typeof node.type === 'string' && node.type.includes('ScrollView')) {
+      return node;
+    }
+    for (const child of childrenOf(node)) {
+      const found = search(child);
+      if (found !== null) {
+        return found;
+      }
+    }
+    return null;
+  };
+  return search(fiber) ?? firstHostDescendant(fiber);
+}
+
+function findContentHost(scrollHost: Fiber): Fiber | null {
+  for (const child of childrenOf(scrollHost)) {
+    const host = firstHostDescendant(child);
+    if (host !== null) {
+      return host;
+    }
+  }
+  return null;
+}
+
+export function isHorizontal(fiber: Fiber): boolean {
+  return propsOf(fiber).horizontal === true;
+}
+
+export async function measureScrollGeometry(scrollFiber: Fiber): Promise<ScrollGeometry | null> {
+  const scrollHost = findScrollHost(scrollFiber);
+  if (scrollHost === null) {
+    return null;
+  }
+  const contentHost = findContentHost(scrollHost);
+  const [viewport, content] = await Promise.all([
+    measureHost(scrollHost),
+    contentHost === null ? Promise.resolve(null) : measureHost(contentHost),
+  ]);
+  if (viewport === null) {
+    return null;
+  }
+  return { viewport, content: content ?? viewport, horizontal: isHorizontal(scrollFiber) };
+}
+
+export function scrollOffsetOf(geometry: ScrollGeometry): number {
+  return geometry.horizontal ? geometry.viewport.x - geometry.content.x : geometry.viewport.y - geometry.content.y;
+}
+
+export function maxScrollOffsetOf(geometry: ScrollGeometry): number {
+  const content = geometry.horizontal ? geometry.content.width : geometry.content.height;
+  const viewport = geometry.horizontal ? geometry.viewport.width : geometry.viewport.height;
+  return Math.max(0, content - viewport);
+}
+
+export function viewportExtentOf(geometry: ScrollGeometry): number {
+  return geometry.horizontal ? geometry.viewport.width : geometry.viewport.height;
+}
+
+export function scrollDirectionsOf(geometry: ScrollGeometry): ScrollDirection[] {
+  const offset = scrollOffsetOf(geometry);
+  const canBackward = offset > SCROLL_TOLERANCE;
+  const canForward = maxScrollOffsetOf(geometry) - offset > SCROLL_TOLERANCE;
+  const [backward, forward]: [ScrollDirection, ScrollDirection] = geometry.horizontal ? ['left', 'right'] : ['up', 'down'];
+  return [...(canBackward ? [backward] : []), ...(canForward ? [forward] : [])];
+}
+
+export function describeScrollDirections(geometry: ScrollGeometry | null): string {
+  if (geometry === null) {
+    return 'none';
+  }
+  const directions = scrollDirectionsOf(geometry);
+  return directions.length === 0 ? 'none' : directions.join(',');
+}