@ankhorage/zora 21.0.22 → 21.1.0

package/src/features/chess/utils/createBoardSquares.ts

@@ -0,0 +1,13 @@
+import type { ChessBoardOrientation, ChessSquareId } from '../../../types/chess';
+
+const files = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h'] as const;
+const ranks = ['1', '2', '3', '4', '5', '6', '7', '8'] as const;
+
+/*** Orders the 64 displayed squares for the selected player orientation. */
+export function createBoardSquares(orientation: ChessBoardOrientation): readonly ChessSquareId[] {
+  const displayedRanks = orientation === 'white' ? [...ranks].reverse() : [...ranks];
+  const displayedFiles = orientation === 'white' ? [...files] : [...files].reverse();
+  return displayedRanks.flatMap((rank) =>
+    displayedFiles.map((file): ChessSquareId => `${file}${rank}`),
+  );
+}

package/src/features/chess/utils/createChessBoardColorScheme.ts

@@ -0,0 +1,55 @@
+import type { ChessBoardColorOverrides, ChessBoardColorScheme } from '../../../types/chess';
+
+export interface ChessColorThemeShape {
+  semantics: {
+    action: {
+      primary: {
+        softBg: string;
+      };
+    };
+    content: {
+      default: string;
+      muted: string;
+    };
+    neutral: {
+      divider: string;
+      surface: string;
+      surfaceHover: string;
+    };
+    success: {
+      softBg: string;
+    };
+    warning: {
+      softBg: string;
+    };
+  };
+}
+
+/***
+ * Creates the theme-derived palette used by `ChessBoard`.
+ *
+ * Use `createChessBoardColorScheme` when custom board overlays, piece renderers,
+ * or adjacent chess UI need to share the same square, highlight, coordinate, and
+ * piece colors as the built-in board.
+ *
+ */
+export function createChessBoardColorScheme(
+  theme: ChessColorThemeShape,
+  overrides?: ChessBoardColorOverrides,
+): ChessBoardColorScheme {
+  return {
+    border: theme.semantics.neutral.divider,
+    coordinateText: theme.semantics.content.muted,
+    darkPiece: theme.semantics.content.default,
+    darkSquare: theme.semantics.neutral.surfaceHover,
+    darkSquareText: theme.semantics.content.muted,
+    lastMoveFrom: theme.semantics.warning.softBg,
+    lastMoveTo: theme.semantics.warning.softBg,
+    legalTarget: theme.semantics.success.softBg,
+    lightPiece: theme.semantics.content.default,
+    lightSquare: theme.semantics.neutral.surface,
+    lightSquareText: theme.semantics.content.muted,
+    selectedSquare: theme.semantics.action.primary.softBg,
+    ...overrides,
+  };
+}

package/src/features/chess/utils/createOpeningBookColorScheme.ts

@@ -0,0 +1,26 @@
+import type { OpeningBookColorOverrides, OpeningBookColorScheme } from '../../../types/chess';
+import type { ChessColorThemeShape } from './createChessBoardColorScheme';
+
+/***
+ * Creates the theme-derived palette used by `OpeningBook`.
+ *
+ * Use `createOpeningBookColorScheme` when custom opening-list rows, badges, or
+ * trainer panels should match the built-in book surface and selected-move states.
+ *
+ */
+export function createOpeningBookColorScheme(
+  theme: ChessColorThemeShape,
+  overrides?: OpeningBookColorOverrides,
+): OpeningBookColorScheme {
+  return {
+    border: theme.semantics.neutral.divider,
+    metricSurface: theme.semantics.neutral.surface,
+    primaryText: theme.semantics.content.default,
+    secondaryText: theme.semantics.content.muted,
+    selectedSurface: theme.semantics.action.primary.softBg,
+    surface: theme.semantics.neutral.surface,
+    surfaceHover: theme.semantics.neutral.surfaceHover,
+    titleText: theme.semantics.content.default,
+    ...overrides,
+  };
+}

package/src/features/chess/utils/getSquareFile.ts

@@ -0,0 +1,6 @@
+import type { ChessSquareId } from '../../../types/chess';
+
+/*** Returns the file letter of a chess square. */
+export function getSquareFile(square: ChessSquareId): string {
+  return square[0] ?? '';
+}

package/src/features/chess/utils/getSquareRank.ts

@@ -0,0 +1,6 @@
+import type { ChessSquareId } from '../../../types/chess';
+
+/*** Returns the rank number of a chess square. */
+export function getSquareRank(square: ChessSquareId): string {
+  return square[1] ?? '';
+}

package/src/features/chess/utils/isLightSquare.ts

@@ -0,0 +1,8 @@
+import type { ChessSquareId } from '../../../types/chess';
+
+const files = 'abcdefgh';
+
+/*** Determines whether a chess square uses the light presentation color. */
+export function isLightSquare(square: ChessSquareId): boolean {
+  return (files.indexOf(square[0] ?? '') + Number(square[1]) - 1) % 2 === 1;
+}

package/src/features/chessTabletopOwnership.test.ts

@@ -0,0 +1,71 @@
+import { readdirSync, readFileSync } from 'node:fs';
+import { extname, join, parse } from 'node:path';
+
+import { expect, test } from 'bun:test';
+import * as ts from 'typescript';
+
+const featureRoots = ['src/features/chess', 'src/features/tabletop'] as const;
+
+test('Chess and Tabletop implementation modules own one matching runtime export each', () => {
+  for (const featureRoot of featureRoots) {
+    for (const directory of [join(featureRoot, 'adapters/inbound'), join(featureRoot, 'utils')]) {
+      for (const name of readdirSync(directory)) {
+        if (!['.ts', '.tsx'].includes(extname(name))) continue;
+        const source = ts.createSourceFile(
+          name,
+          readFileSync(join(directory, name), 'utf8'),
+          ts.ScriptTarget.Latest,
+          true,
+        );
+        const runtimeExports = source.statements.flatMap((statement) => {
+          if (
+            !ts.canHaveModifiers(statement) ||
+            !ts
+              .getModifiers(statement)
+              ?.some((modifier) => modifier.kind === ts.SyntaxKind.ExportKeyword)
+          )
+            return [];
+          if (ts.isFunctionDeclaration(statement) && statement.name) return [statement.name.text];
+          if (ts.isVariableStatement(statement))
+            return statement.declarationList.declarations.map((declaration) =>
+              declaration.name.getText(source),
+            );
+          return [];
+        });
+        expect(runtimeExports, join(directory, name)).toEqual([parse(name).name]);
+      }
+    }
+  }
+});
+
+test('Chess and Tabletop source graphs contain no standalone package or game-service imports', () => {
+  const sourcePaths = featureRoots.flatMap((featureRoot) => {
+    const visit = (directory: string): string[] =>
+      readdirSync(directory, { withFileTypes: true }).flatMap((entry) => {
+        const path = join(directory, entry.name);
+        if (entry.isDirectory()) return visit(path);
+        return /\.(?:ts|tsx)$/.test(entry.name) && !entry.name.includes('.test.') ? [path] : [];
+      });
+    return visit(featureRoot);
+  });
+  for (const path of sourcePaths) {
+    const source = ts.createSourceFile(
+      path,
+      readFileSync(path, 'utf8'),
+      ts.ScriptTarget.Latest,
+      true,
+    );
+    const imports = source.statements
+      .filter(ts.isImportDeclaration)
+      .map((statement) => statement.moduleSpecifier)
+      .filter(ts.isStringLiteral)
+      .map((literal) => literal.text);
+    for (const specifier of imports) {
+      if (specifier.startsWith('.')) continue;
+      expect(
+        ['react', 'react-native', '@ankhorage/color-theory'],
+        `${path}: ${specifier}`,
+      ).toContain(specifier);
+    }
+  }
+});

package/src/features/empty-state/adapters/inbound/EmptyState.tsx

@@ -66,9 +66,5 @@ function EmptyStateInner({
  * so apps can guide users without custom card and button wiring.
  *
  
- * @example Empty project list
- * ```tsx
- * <EmptyState title="No projects yet" primaryAction={{ label: 'Create project', onPress }} />
- * ```
  */
 export const EmptyState = withZoraThemeScope(EmptyStateInner);

package/src/features/form/text-input/adapters/inbound/TextInput.tsx

@@ -58,9 +58,5 @@ function TextInputInner({
  *
  * Use `TextInput` for single-line, multiline, and password form controls with ZORA styling.
  *
- * @example Search input
- * ```tsx
- * <TextInput placeholder="Search" leadingIcon={{ name: 'search-outline' }} />
- * ```
  */
 export const TextInput = withZoraThemeScope(TextInputInner);

package/src/features/game/adapters/inbound/Game.tsx

@@ -0,0 +1,43 @@
+import { RuntimeRendererConfigProvider } from '@ankhorage/runtime';
+import React from 'react';
+
+import type { GameProps } from '../../../../types/gamePresentation';
+import { createGameBindingContext } from '../../composition/createGameBindingContext';
+import { createGameMeasurementRegistry } from '../../composition/createGameMeasurementRegistry';
+import { GameRuntimeContext } from '../../composition/GameRuntimeContext';
+import { useGameRuntime } from '../../composition/useGameRuntime';
+import { GameField } from './GameField';
+
+/*** Bind one serializable game definition to a local transient session and presentation field. */
+export function Game(props: GameProps) {
+  const runtime = useGameRuntime(props);
+  const [measurementRegistry] = React.useState(createGameMeasurementRegistry);
+  const runtimeContext = React.useMemo(
+    () => ({ ...runtime, ...measurementRegistry, interactionPolicy: props.interactionPolicy }),
+    [measurementRegistry, props.interactionPolicy, runtime],
+  );
+  const runtimeBindingConfig = React.useMemo(
+    () => ({ bindingContext: createGameBindingContext(runtime.session) }),
+    [runtime.session],
+  );
+
+  return (
+    <GameRuntimeContext.Provider value={runtimeContext}>
+      <RuntimeRendererConfigProvider value={runtimeBindingConfig}>
+        <GameField
+          {...(props.aspectRatio === undefined ? {} : { aspectRatio: props.aspectRatio })}
+          {...(props.minHeight === undefined ? {} : { minHeight: props.minHeight })}
+          {...(props.fill === undefined ? {} : { fill: props.fill })}
+          {...(props.clip === undefined ? {} : { clip: props.clip })}
+          {...(props.accessibilityLabel === undefined
+            ? {}
+            : { accessibilityLabel: props.accessibilityLabel })}
+          {...(props.testID === undefined ? {} : { testID: props.testID })}
+          interactionPolicy={props.interactionPolicy}
+        >
+          {props.children}
+        </GameField>
+      </RuntimeRendererConfigProvider>
+    </GameRuntimeContext.Provider>
+  );
+}

package/src/features/game/adapters/inbound/GameEntity.tsx

@@ -0,0 +1,44 @@
+import React from 'react';
+import { Animated, StyleSheet, type View, type ViewStyle } from 'react-native';
+
+import type { GameEntityProps } from '../../../../types/gamePresentation';
+import { useGameEntityAnimatedStyle } from '../../utils/useGameEntityAnimatedStyle';
+import { useGameEntityMeasurement } from '../../utils/useGameEntityMeasurement';
+
+/*** Render one generic positioned game entity without owning gameplay semantics. */
+export function GameEntity(props: GameEntityProps) {
+  const elementRef = React.useRef<View | null>(null);
+  const animatedStyle = useGameEntityAnimatedStyle(props);
+  useGameEntityMeasurement(elementRef, props.measurementId);
+
+  return (
+    <Animated.View
+      ref={elementRef}
+      accessibilityLabel={props.accessibilityLabel}
+      testID={props.testID}
+      pointerEvents={
+        props.interactionPolicy === 'passive' ? 'none' : (props.pointerEvents ?? 'auto')
+      }
+      style={[styles.root, createEntityStaticStyle(props), animatedStyle]}
+    >
+      {props.children}
+    </Animated.View>
+  );
+}
+
+/*** Convert non-animated GameEntity presentation props into a React Native view style. */
+function createEntityStaticStyle(props: GameEntityProps): ViewStyle {
+  return {
+    display: props.hidden === true ? 'none' : 'flex',
+    position: 'absolute',
+    zIndex: props.zIndex ?? 0,
+    ...(props.height === undefined ? {} : { height: props.height }),
+    ...(props.width === undefined ? {} : { width: props.width }),
+  };
+}
+
+const styles = StyleSheet.create({
+  root: {
+    position: 'absolute',
+  },
+});

package/src/features/game/adapters/inbound/GameField.tsx

@@ -0,0 +1,52 @@
+import { StyleSheet } from 'react-native';
+
+import type { GameFieldProps } from '../../../../types/gamePresentation';
+import { View } from '../../../layout/public';
+
+/*** Render a bounded relative-positioning surface for game presentation content. */
+export function GameField({
+  children,
+  aspectRatio,
+  minHeight = 320,
+  fill = false,
+  clip = true,
+  accessibilityLabel,
+  interactionPolicy,
+  testID,
+}: GameFieldProps) {
+  return (
+    <View
+      {...(accessibilityLabel === undefined ? {} : { accessibilityLabel })}
+      {...(testID === undefined ? {} : { testID })}
+      interactionPolicy={interactionPolicy}
+      pointerEvents={interactionPolicy === 'passive' ? 'none' : 'auto'}
+      style={[
+        styles.root,
+        clip ? styles.clipped : styles.overflowVisible,
+        fill ? styles.fill : undefined,
+        {
+          ...(aspectRatio === undefined ? {} : { aspectRatio }),
+          minHeight,
+        },
+      ]}
+    >
+      {children}
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  clipped: {
+    overflow: 'hidden',
+  },
+  fill: {
+    flex: 1,
+  },
+  overflowVisible: {
+    overflow: 'visible',
+  },
+  root: {
+    position: 'relative',
+    width: '100%',
+  },
+});

package/src/features/game/adapters/inbound/GameInputZone.tsx

@@ -0,0 +1,99 @@
+import { Platform, StyleSheet, View, type ViewStyle } from 'react-native';
+
+import type { GameInputZoneProps } from '../../../../types/gamePresentation';
+import { toGamePercentage } from '../../utils/toGamePercentage';
+import { useGameInputZoneResponder } from './useGameInputZoneResponder';
+
+/*** Capture pointer/touch geometry and optional keyboard input as normalized generic Game events. */
+export function GameInputZone({
+  x = 0,
+  y = 0,
+  width = 100,
+  height = 100,
+  zIndex = 0,
+  enabled = true,
+  continuous = true,
+  keyboardBindings,
+  accessibilityLabel,
+  interactionPolicy,
+  testID,
+  ...inputProps
+}: GameInputZoneProps) {
+  const { dispatchKeyboard, dispatchPointer, handleLayout, shouldSetResponder } =
+    useGameInputZoneResponder({
+      ...inputProps,
+      x,
+      y,
+      width,
+      height,
+      enabled: enabled && interactionPolicy !== 'passive',
+      interactionPolicy,
+      continuous,
+      ...(keyboardBindings === undefined ? {} : { keyboardBindings }),
+    });
+  const keyboardProps = createGameInputZoneKeyboardProps({
+    dispatchKeyboard,
+    enabled: enabled && interactionPolicy !== 'passive',
+    keyboardBindings,
+  });
+
+  return (
+    <View
+      {...keyboardProps}
+      {...(accessibilityLabel === undefined ? {} : { accessibilityLabel })}
+      {...(testID === undefined ? {} : { testID })}
+      {...(continuous
+        ? { onResponderGrant: dispatchPointer, onResponderMove: dispatchPointer }
+        : { onResponderRelease: dispatchPointer })}
+      collapsable={false}
+      onLayout={handleLayout}
+      onStartShouldSetResponder={shouldSetResponder}
+      pointerEvents={enabled && interactionPolicy !== 'passive' ? 'auto' : 'none'}
+      style={createInputZoneStyle({ x, y, width, height, zIndex })}
+    />
+  );
+}
+
+interface GameInputZoneKeyboardPropsInput {
+  readonly dispatchKeyboard: (event: { readonly key: string; preventDefault(): void }) => void;
+  readonly enabled: boolean;
+  readonly keyboardBindings: GameInputZoneProps['keyboardBindings'];
+}
+
+/*** Add a focusable web keyboard target only when the input zone owns key bindings. */
+function createGameInputZoneKeyboardProps({
+  dispatchKeyboard,
+  enabled,
+  keyboardBindings,
+}: GameInputZoneKeyboardPropsInput) {
+  if (Platform.OS !== 'web' || !enabled || keyboardBindings === undefined) return {};
+  if (keyboardBindings.length === 0) return {};
+
+  return { onKeyDown: dispatchKeyboard, tabIndex: 0 as const };
+}
+
+interface InputZoneStyleInput {
+  readonly x: number;
+  readonly y: number;
+  readonly width: number;
+  readonly height: number;
+  readonly zIndex: number;
+}
+
+/*** Convert field-relative input-zone props into one absolute React Native style. */
+function createInputZoneStyle({ x, y, width, height, zIndex }: InputZoneStyleInput): ViewStyle {
+  return {
+    left: toGamePercentage(x),
+    top: toGamePercentage(y),
+    width: toGamePercentage(width),
+    height: toGamePercentage(height),
+    zIndex,
+    ...styles.root,
+  };
+}
+
+const styles = StyleSheet.create({
+  root: {
+    position: 'absolute',
+  },
+});

package/src/features/game/adapters/inbound/GameMeasurementProbe.tsx

@@ -0,0 +1,83 @@
+import React from 'react';
+
+import type { GameMeasurementProbeProps } from '../../../../types/gamePresentation';
+import type { GameRuntimeContextValue } from '../../../../types/gameRuntime';
+import { GameRuntimeContext } from '../../composition/GameRuntimeContext';
+import { createGameMeasurementEvent } from './createGameMeasurementEvent';
+
+/*** Measure two registered game entities and dispatch only their raw rendered geometry. */
+export function GameMeasurementProbe({
+  sourceId,
+  targetId,
+  eventType = 'game.measurement',
+  entityId,
+  delayMs = 0,
+  enabled = true,
+  interactionPolicy,
+}: GameMeasurementProbeProps) {
+  const runtime = React.useContext(GameRuntimeContext);
+  if (runtime === null) throw new Error('GameMeasurementProbe must be rendered inside Game.');
+
+  React.useEffect(() => {
+    if (!enabled || interactionPolicy === 'passive' || runtime.interactionPolicy === 'passive')
+      return undefined;
+
+    const timer = setTimeout(
+      () => {
+        void dispatchGameMeasurement({
+          dispatch: runtime.dispatch,
+          measure: runtime.measure,
+          sourceId,
+          targetId,
+          eventType,
+          ...(entityId === undefined ? {} : { entityId }),
+        });
+      },
+      Math.max(0, delayMs),
+    );
+
+    return () => clearTimeout(timer);
+  }, [
+    delayMs,
+    enabled,
+    interactionPolicy,
+    entityId,
+    eventType,
+    runtime.dispatch,
+    runtime.interactionPolicy,
+    runtime.measure,
+    sourceId,
+    targetId,
+  ]);
+
+  return null;
+}
+
+interface DispatchGameMeasurementInput {
+  readonly dispatch: GameRuntimeContextValue['dispatch'];
+  readonly measure: GameRuntimeContextValue['measure'];
+  readonly sourceId: string;
+  readonly targetId: string;
+  readonly eventType: string;
+  readonly entityId?: string;
+}
+
+/*** Resolve both registered entity measurements before dispatching one Game event. */
+async function dispatchGameMeasurement(input: DispatchGameMeasurementInput): Promise<void> {
+  const [source, target] = await Promise.all([
+    input.measure(input.sourceId),
+    input.measure(input.targetId),
+  ]);
+  if (source === undefined || target === undefined) return;
+
+  input.dispatch(
+    createGameMeasurementEvent({
+      eventType: input.eventType,
+      ...(input.entityId === undefined ? {} : { entityId: input.entityId }),
+      sourceId: input.sourceId,
+      targetId: input.targetId,
+      source,
+      target,
+    }),
+  );
+}

package/src/features/game/adapters/inbound/GameOverlay.tsx

@@ -0,0 +1,58 @@
+import { StyleSheet, type ViewStyle } from 'react-native';
+
+import type { GameOverlayPlacement, GameOverlayProps } from '../../../../types/gamePresentation';
+import { View } from '../../../layout/public';
+
+/*** Render an absolute game presentation layer for HUD, feedback, and phase content. */
+export function GameOverlay({
+  children,
+  placement = 'fill',
+  blocking = false,
+  padding = 0,
+  accessibilityLabel,
+  interactionPolicy,
+  testID,
+}: GameOverlayProps) {
+  return (
+    <View
+      {...(accessibilityLabel === undefined ? {} : { accessibilityLabel })}
+      {...(testID === undefined ? {} : { testID })}
+      pointerEvents={interactionPolicy === 'passive' ? 'none' : blocking ? 'auto' : 'box-none'}
+      style={[styles.root, resolvePlacementStyle(placement), { padding }]}
+    >
+      {children}
+    </View>
+  );
+}
+
+/*** Resolve overlay alignment without coupling layout to any game genre or rule. */
+function resolvePlacementStyle(placement: GameOverlayPlacement): ViewStyle {
+  switch (placement) {
+    case 'center':
+      return { alignItems: 'center', justifyContent: 'center' };
+    case 'top':
+      return { alignItems: 'center', justifyContent: 'flex-start' };
+    case 'bottom':
+      return { alignItems: 'center', justifyContent: 'flex-end' };
+    case 'top-left':
+      return { alignItems: 'flex-start', justifyContent: 'flex-start' };
+    case 'top-right':
+      return { alignItems: 'flex-end', justifyContent: 'flex-start' };
+    case 'bottom-left':
+      return { alignItems: 'flex-start', justifyContent: 'flex-end' };
+    case 'bottom-right':
+      return { alignItems: 'flex-end', justifyContent: 'flex-end' };
+    case 'fill':
+      return {};
+  }
+}
+
+const styles = StyleSheet.create({
+  root: {
+    bottom: 0,
+    left: 0,
+    position: 'absolute',
+    right: 0,
+    top: 0,
+  },
+});

package/src/features/game/adapters/inbound/createGameKeyboardEvent.test.ts

@@ -0,0 +1,51 @@
+import { describe, expect, test } from 'bun:test';
+
+import { createGameKeyboardEvent } from './createGameKeyboardEvent';
+
+describe('createGameKeyboardEvent', () => {
+  test('maps a configured key through fallback event and entity values', () => {
+    expect(
+      createGameKeyboardEvent({
+        bindings: [{ key: 'ArrowLeft', preventDefault: true }],
+        fallbackEventType: 'player.move',
+        fallbackEntityId: 'player',
+        key: 'ArrowLeft',
+      }),
+    ).toEqual({
+      event: {
+        type: 'player.move',
+        entityId: 'player',
+        payload: { key: 'ArrowLeft' },
+      },
+      preventDefault: true,
+    });
+  });
+
+  test('allows one key binding to override the event target', () => {
+    expect(
+      createGameKeyboardEvent({
+        bindings: [{ key: ' ', eventType: 'player.action', entityId: 'actor' }],
+        fallbackEventType: 'player.move',
+        fallbackEntityId: 'player',
+        key: ' ',
+      }),
+    ).toEqual({
+      event: {
+        type: 'player.action',
+        entityId: 'actor',
+        payload: { key: ' ' },
+      },
+      preventDefault: false,
+    });
+  });
+
+  test('ignores keys without a binding', () => {
+    expect(
+      createGameKeyboardEvent({
+        bindings: [{ key: 'ArrowLeft' }],
+        fallbackEventType: 'player.move',
+        key: 'ArrowRight',
+      }),
+    ).toBeUndefined();
+  });
+});

package/src/features/game/adapters/inbound/createGameKeyboardEvent.ts

@@ -0,0 +1,33 @@
+import type { GameEvent } from '@ankhorage/game';
+
+import type { GameKeyboardBinding } from '../../../../types/gamePresentation';
+
+interface CreateGameKeyboardEventInput {
+  readonly bindings: readonly GameKeyboardBinding[];
+  readonly fallbackEventType: string;
+  readonly fallbackEntityId?: string;
+  readonly key: string;
+}
+
+interface GameKeyboardEventResult {
+  readonly event: GameEvent;
+  readonly preventDefault: boolean;
+}
+
+/*** Map one configured keyboard key into a generic Game event. */
+export function createGameKeyboardEvent(
+  input: CreateGameKeyboardEventInput,
+): GameKeyboardEventResult | undefined {
+  const binding = input.bindings.find((candidate) => candidate.key === input.key);
+  if (binding === undefined) return undefined;
+
+  const entityId = binding.entityId ?? input.fallbackEntityId;
+  return {
+    event: {
+      type: binding.eventType ?? input.fallbackEventType,
+      ...(entityId === undefined ? {} : { entityId }),
+      payload: { key: input.key },
+    },
+    preventDefault: binding.preventDefault ?? false,
+  };
+}