@oxy.so/bloom 4.0.0 → 4.2.0

package/src/location-puck/LocationPuck.tsx

@@ -0,0 +1,231 @@
+import React, { memo, useEffect, useMemo } from 'react';
+import { StyleSheet, View, type ViewStyle } from 'react-native';
+import Animated, {
+  Easing,
+  cancelAnimation,
+  useAnimatedStyle,
+  useReducedMotion,
+  useSharedValue,
+  withRepeat,
+  withSequence,
+  withTiming,
+} from 'react-native-reanimated';
+import Svg, { Polygon } from 'react-native-svg';
+
+import { bloomShadowStyle } from '../design-tokens/shadows';
+import { MapAreaCircle } from '../map-marker/MapAreaCircle';
+import { useTheme } from '../theme/use-theme';
+import {
+  LOCATION_PUCK_GEOMETRY,
+  LOCATION_PUCK_PULSE_MS,
+  LOCATION_PUCK_STALE_OPACITY,
+} from './constants';
+import { HeadingCone } from './HeadingCone';
+import {
+  chevronPoints,
+  coneHalfAngle,
+  describeLocationPuck,
+  puckBoxSize,
+  puckRotation,
+  resolveLocationPuckPaint,
+} from './shared';
+import type { LocationPuckProps } from './types';
+
+/**
+ * WHERE YOU ARE, drawn on a map the app owns.
+ *
+ * Three layers, all centred on one point, bottom to top:
+ *
+ *   halo     the accuracy circle — `MapAreaCircle` at the radius the app
+ *            computed in pixels. It is not a second implementation of that
+ *            circle: an accuracy halo IS the approximate-area circle
+ *            `map-marker` already publishes, down to the accent fill at 15%
+ *            and the 1.5 edge.
+ *   cone     the heading wedge, fading along its length, as wide as the device
+ *            is unsure. Absent entirely when the heading is unknown, and when
+ *            the chevron is drawn instead.
+ *   puck     an 18 dot in the accent inside a 3 ring of that accent's OWN
+ *            on-colour, with `map-marker`'s `shadow-m`. In `navigating` it is a
+ *            chevron in the same two colours. A stale dot and its ring are the
+ *            other pair — see `resolveLocationPuckPaint`.
+ *
+ * ── IT POSITIONS NOTHING ────────────────────────────────────────────────────
+ *
+ * The same contract every `map-marker` piece publishes: the component draws one
+ * square box and centres every layer in it, and the APP centres that box on the
+ * coordinate. There is no absolute positioning here, no offsets, and nothing
+ * that assumes a particular map library.
+ *
+ * ── THE SHADOW IS ON THE DOT, NOT ON THE CHEVRON ────────────────────────────
+ *
+ * A drop shadow is the shadow of a node's BOX, and the chevron's box is a
+ * square containing a wedge — so a shadow on it draws a rectangle floating
+ * under a triangle. The chevron is separated from the map by its ring-coloured
+ * STROKE instead, which traces the shape it actually has.
+ *
+ * ── MOTION ──────────────────────────────────────────────────────────────────
+ *
+ * Only `locating` moves: the dot swells 18% and the halo breathes, once every
+ * 1600ms, out of one shared driver. A pulse that never stops is a battery cost
+ * and a distraction, so it stops the moment there is a fix — and
+ * `useReducedMotion()` (or the `reducedMotion` prop) stops it outright. The
+ * driver is written IMPERATIVELY from an effect and only READ in
+ * `useAnimatedStyle`, with every shared value in the deps array, which is what
+ * `docs/motion.mdx` requires for the animation to tick on web at all.
+ */
+
+/** The chevron's outline. Reserved in the viewBox, so no half of it is clipped. */
+const CHEVRON_STROKE = 2.5;
+/** How far the dot swells at the crest of the pulse. */
+const PULSE_SCALE = 0.18;
+
+/** One full-size layer that centres whatever it holds on the box's centre. */
+const layerStyle: ViewStyle = {
+  ...StyleSheet.absoluteFillObject,
+  alignItems: 'center',
+  justifyContent: 'center',
+};
+
+function LocationPuckComponent({
+  state = 'located',
+  mode = 'following',
+  heading,
+  headingAccuracy,
+  headingUnknown = false,
+  accuracyRadius,
+  coneLength,
+  accessibilityLabel,
+  stateLabels,
+  reducedMotion,
+  style,
+  testID,
+}: LocationPuckProps) {
+  const theme = useTheme();
+  const paint = useMemo(() => resolveLocationPuckPaint(theme), [theme]);
+  const systemReduceMotion = useReducedMotion();
+  const animate = state === 'locating' && !(reducedMotion ?? systemReduceMotion);
+
+  const progress = useSharedValue(0);
+  useEffect(() => {
+    cancelAnimation(progress);
+    if (!animate) {
+      progress.value = 0;
+      return;
+    }
+    const easing = Easing.inOut(Easing.quad);
+    progress.value = withRepeat(
+      withSequence(
+        withTiming(1, { duration: LOCATION_PUCK_PULSE_MS / 2, easing }),
+        withTiming(0, { duration: LOCATION_PUCK_PULSE_MS / 2, easing }),
+      ),
+      -1,
+      false,
+    );
+    return () => cancelAnimation(progress);
+  }, [animate, progress]);
+
+  const haloRest = state === 'stale' ? LOCATION_PUCK_STALE_OPACITY : 1;
+
+  const dotPulse = useAnimatedStyle(
+    () => ({ transform: [{ scale: animate ? 1 + progress.value * PULSE_SCALE : 1 }] }),
+    [animate, progress],
+  );
+  const haloBreath = useAnimatedStyle(
+    () => ({
+      opacity: animate ? haloRest * (0.6 + progress.value * 0.4) : haloRest,
+      transform: [{ scale: animate ? 0.94 + progress.value * 0.1 : 1 }],
+    }),
+    [animate, haloRest, progress],
+  );
+
+  const navigating = mode === 'navigating';
+  const drawsCone = !navigating && !headingUnknown;
+  const rotation = puckRotation(mode, heading);
+  const length = coneLength ?? LOCATION_PUCK_GEOMETRY.cone;
+  const size = puckBoxSize({ accuracyRadius, coneLength: length, cone: drawsCone });
+  const stale = state === 'stale';
+  const dotColor = stale ? paint.staleDot : paint.dot;
+  const ringColor = stale ? paint.staleRing : paint.ring;
+  const puck = LOCATION_PUCK_GEOMETRY.dot + LOCATION_PUCK_GEOMETRY.ring * 2;
+  const chevronBox = LOCATION_PUCK_GEOMETRY.chevron;
+
+  return (
+    <View
+      // A PROP, never a style entry: the puck is drawn over a map whose
+      // gestures belong to the app, and a box this size swallowing a pan would
+      // freeze the map wherever the user happens to be standing.
+      pointerEvents="none"
+      role="img"
+      accessibilityLabel={
+        accessibilityLabel ??
+        describeLocationPuck({ state, mode, heading, headingUnknown, labels: stateLabels })
+      }
+      testID={testID}
+      style={[{ width: size, height: size, alignItems: 'center', justifyContent: 'center' }, style]}
+    >
+      {accuracyRadius !== undefined ? (
+        <View style={layerStyle}>
+          <Animated.View style={haloBreath}>
+            <MapAreaCircle radius={accuracyRadius} testID={testID ? `${testID}-halo` : undefined} />
+          </Animated.View>
+        </View>
+      ) : null}
+
+      {drawsCone ? (
+        <View style={layerStyle}>
+          <View style={{ transform: [{ rotate: `${rotation}deg` }] }}>
+            <HeadingCone
+              length={length}
+              halfAngle={coneHalfAngle(headingAccuracy)}
+              color={paint.cone}
+              testID={testID ? `${testID}-cone` : undefined}
+            />
+          </View>
+        </View>
+      ) : null}
+
+      <View style={layerStyle}>
+        {navigating ? (
+          <View style={{ transform: [{ rotate: `${rotation}deg` }] }}>
+            <Svg
+              width={chevronBox}
+              height={chevronBox}
+              // The stroke straddles the outline, so half of it lies outside
+              // the shape. The viewBox gives that half room rather than nudging
+              // the points inward by a number nobody can read off the drawing.
+              viewBox={`${-CHEVRON_STROKE / 2} ${-CHEVRON_STROKE / 2} ${chevronBox + CHEVRON_STROKE} ${chevronBox + CHEVRON_STROKE}`}
+              testID={testID ? `${testID}-chevron` : undefined}
+            >
+              <Polygon
+                points={chevronPoints(chevronBox)}
+                fill={dotColor}
+                stroke={ringColor}
+                strokeWidth={CHEVRON_STROKE}
+                strokeLinejoin="round"
+              />
+            </Svg>
+          </View>
+        ) : (
+          <Animated.View
+            testID={testID ? `${testID}-dot` : undefined}
+            style={[
+              {
+                width: puck,
+                height: puck,
+                borderRadius: puck / 2,
+                borderWidth: LOCATION_PUCK_GEOMETRY.ring,
+                borderColor: ringColor,
+                backgroundColor: dotColor,
+                ...bloomShadowStyle('m'),
+              },
+              dotPulse,
+            ]}
+          />
+        )}
+      </View>
+    </View>
+  );
+}
+
+export const LocationPuck = memo(LocationPuckComponent);
+LocationPuck.displayName = 'LocationPuck';

package/src/location-puck/constants.ts

@@ -0,0 +1,70 @@
+import type { LocationPuckState } from './types';
+
+export interface LocationPuckGeometry {
+  /** The dot's own diameter, inside the ring. */
+  dot: number;
+  /** The ring around it — the only thing that separates the dot from a tile of the same hue. */
+  ring: number;
+  /** The navigating chevron's box, tip to base. */
+  chevron: number;
+  /** How far the heading cone reaches by default, in pixels. */
+  cone: number;
+  /** The narrowest the cone gets, in degrees either side of the heading. */
+  coneMinHalfAngle: number;
+  /** The widest. Past this the wedge stops meaning "roughly this way" and starts meaning "somewhere". */
+  coneMaxHalfAngle: number;
+}
+
+/**
+ * 18 + 3 is a 24 puck, which is the smallest thing on a map that still reads as
+ * a deliberate object rather than as a tile artefact, and it is deliberately
+ * SMALLER than `map-marker`'s 36 cluster bubble: the puck is where you are, not
+ * a thing you press, and it must not out-shout the markers you came to read.
+ *
+ * The cone reaches 72 — three puck diameters — because a wedge shorter than the
+ * thing it comes out of reads as a collar rather than as a direction.
+ */
+export const LOCATION_PUCK_GEOMETRY: LocationPuckGeometry = {
+  dot: 18,
+  ring: 3,
+  chevron: 34,
+  cone: 72,
+  coneMinHalfAngle: 14,
+  coneMaxHalfAngle: 55,
+};
+
+/**
+ * The cone's two gradient stops, as an OFFSET and an OPACITY — never as a
+ * colour carrying alpha.
+ *
+ * Same shape, and the same reason, as `theme/glass-colors`' `GLASS_SHEEN`:
+ * `react-native-svg` reads `stopColor` for its RGB and DISCARDS any alpha
+ * channel in it, so an `rgba(…, 0.45)` stop paints at FULL strength on native
+ * while web renders it correctly. A cone written that way is a hard-edged
+ * accent wedge sitting over half the map on a device, and a gate that pins both
+ * platforms to the same token stays green, because the two forks agree about
+ * every value and only the renderer's reading of it differs.
+ *
+ * Holding the opacity in its own field removes the representation that can be
+ * half-read: `HeadingCone` hands `color` to `stopColor` and `opacity` to
+ * `stopOpacity`, which are the two props SVG actually defines.
+ */
+export const LOCATION_PUCK_CONE_STOPS = {
+  /** At the apex, on the dot. */
+  inner: { offset: 0, opacity: 0.45 },
+  /** At the far end, gone. */
+  outer: { offset: 1, opacity: 0 },
+} as const;
+
+/** How far the halo fades once the fix stops being refreshed. */
+export const LOCATION_PUCK_STALE_OPACITY = 0.5;
+
+/** One full breath of the `locating` pulse. */
+export const LOCATION_PUCK_PULSE_MS = 1600;
+
+/** The English default state words, in the order a sentence wants them. */
+export const LOCATION_PUCK_STATE_LABELS: Readonly<Record<LocationPuckState, string>> = {
+  locating: 'Finding your location',
+  located: 'Your location',
+  stale: 'Your last known location',
+};

package/src/location-puck/index.ts

@@ -0,0 +1,12 @@
+export { LocationPuck } from './LocationPuck';
+export {
+  LOCATION_PUCK_CONE_STOPS,
+  LOCATION_PUCK_GEOMETRY,
+  LOCATION_PUCK_PULSE_MS,
+  LOCATION_PUCK_STALE_OPACITY,
+  LOCATION_PUCK_STATE_LABELS,
+} from './constants';
+export type { LocationPuckGeometry } from './constants';
+export { coneHalfAngle, describeLocationPuck, resolveLocationPuckPaint } from './shared';
+export type { LocationPuckPaint } from './shared';
+export type { LocationPuckMode, LocationPuckProps, LocationPuckState } from './types';

package/src/location-puck/shared.ts

@@ -0,0 +1,185 @@
+/**
+ * The puck's colours, its geometry maths, and the sentence it announces — all
+ * pure, so a gate can walk every preset x mode and every heading without
+ * rendering anything.
+ */
+import { resolveMapMarkerPaint } from '../map-marker/shared';
+import { surfaceTextOn } from '../styles/surface-levels';
+import { resolveAccentColors } from '../theme/accent-colors';
+import type { Theme } from '../theme/types';
+import { LOCATION_PUCK_GEOMETRY, LOCATION_PUCK_STATE_LABELS } from './constants';
+import type { LocationPuckMode, LocationPuckState } from './types';
+
+export interface LocationPuckPaint {
+  /** The live dot — the accent's own solid fill. */
+  dot: string;
+  /** The ring around it: the accent fill's OWN on-colour. */
+  ring: string;
+  /** The dot once the fix is stale: the accent gone, a quiet neutral in its place. */
+  staleDot: string;
+  /** The ring around THAT: the map-chrome surface the quiet neutral was floored against. */
+  staleRing: string;
+  /** The heading cone and the accuracy halo. */
+  cone: string;
+}
+
+/**
+ * ── THE RING IS THE DOT'S OWN ON-COLOUR, AND THAT IS WHY THERE ARE TWO ──────
+ *
+ * A ring around a dot has one job: make the dot read as a deliberate object
+ * over tiles Bloom cannot see. Bloom cannot measure anything against those
+ * tiles, but it CAN guarantee the ring reads against the dot — and every fill
+ * in this library already ships with the colour that reads on it. So the live
+ * ring is `resolveAccentColors(…, 'solid').foreground` (white for most seeds,
+ * black for a light one like yellow or peach — the pair adapts, which a
+ * hardcoded white ring does not), and the stale ring is the map-chrome surface,
+ * because the stale dot is a text rung floored against exactly that surface.
+ *
+ * Measured over a dark tile: the chrome surface as the LIVE ring disappeared
+ * entirely in dark mode — a dark ring on a dark map — while the on-colour
+ * keeps the puck ringed in both modes over both tiles.
+ *
+ * Nothing here is derived. The cone and the halo are `map-marker`'s own
+ * resolved `area` colour, so the puck belongs to the family that already draws
+ * on maps; the dot and its ring are one accent pair; the stale dot and its ring
+ * are one surface pair.
+ */
+export function resolveLocationPuckPaint(theme: Theme): LocationPuckPaint {
+  const map = resolveMapMarkerPaint(theme);
+  const accent = resolveAccentColors(theme.colors, 'primary', 'solid');
+  return {
+    dot: accent.background,
+    ring: accent.foreground,
+    staleDot: surfaceTextOn(theme, map.surface).textSecondary,
+    staleRing: map.surface,
+    cone: map.area,
+  };
+}
+
+// ---------------------------------------------------------------------------
+//  Geometry
+// ---------------------------------------------------------------------------
+
+/**
+ * The cone's half-width in degrees: the platform's own heading uncertainty,
+ * clamped into the band where a wedge still means something.
+ *
+ * A non-finite or negative reading takes the floor rather than collapsing the
+ * wedge to nothing — "the device told us nothing" is {@link
+ * LocationPuckProps.headingUnknown}, and it draws no cone at all.
+ */
+export function coneHalfAngle(headingAccuracy: number | undefined): number {
+  const { coneMinHalfAngle, coneMaxHalfAngle } = LOCATION_PUCK_GEOMETRY;
+  if (headingAccuracy === undefined || !Number.isFinite(headingAccuracy)) return coneMinHalfAngle;
+  return Math.min(coneMaxHalfAngle, Math.max(coneMinHalfAngle, headingAccuracy));
+}
+
+/** A heading folded into `[0, 360)`; a non-finite one reads as north. */
+export function normalizeHeading(heading: number | undefined): number {
+  if (heading === undefined || !Number.isFinite(heading)) return 0;
+  return ((heading % 360) + 360) % 360;
+}
+
+/**
+ * How far the puck's own box has to turn.
+ *
+ * `compass` is 0 BY CONSTRUCTION: the app has already rotated the map so the
+ * heading is up, and turning the cone as well would apply the rotation twice —
+ * the mirror of the correction `MapCompass` makes for its needle.
+ */
+export function puckRotation(mode: LocationPuckMode, heading: number | undefined): number {
+  return mode === 'compass' ? 0 : normalizeHeading(heading);
+}
+
+/**
+ * The wedge, as an SVG path, in a `2 * length` square whose centre is the dot.
+ *
+ * Drawn pointing UP (the `-90°` ray) and turned by the caller's own transform,
+ * so the apex is the box's centre and a rotation about that centre is a
+ * rotation about the dot. `MeterRing` makes the same split for the same reason:
+ * `react-native-svg` applies an element transform before the geometry on some
+ * native versions, so the rotation belongs on the host view, never on the path.
+ *
+ * `A` takes `large-arc-flag 0` because the arc is at most
+ * `2 * coneMaxHalfAngle` = 110°, and `sweep-flag 1` because SVG's y axis points
+ * down, so increasing angle is clockwise.
+ */
+export function conePath(length: number, halfAngle: number): string {
+  const r = Math.max(0, length);
+  const half = Math.max(0, Math.min(90, halfAngle));
+  const centre = r;
+  const start = ((-90 - half) * Math.PI) / 180;
+  const end = ((-90 + half) * Math.PI) / 180;
+  const round = (n: number) => Math.round(n * 1000) / 1000;
+  const x1 = round(centre + r * Math.cos(start));
+  const y1 = round(centre + r * Math.sin(start));
+  const x2 = round(centre + r * Math.cos(end));
+  const y2 = round(centre + r * Math.sin(end));
+  return `M ${centre} ${centre} L ${x1} ${y1} A ${round(r)} ${round(r)} 0 0 1 ${x2} ${y2} Z`;
+}
+
+/**
+ * The navigating chevron, as SVG polygon points in a `size` square, tip up.
+ *
+ * A chevron rather than an arrow because the notch is what makes the shape read
+ * as a direction at 28px with no stroke weight to spare, and the notch depth is
+ * 0.7 of the height — shallower and it is a triangle, deeper and the two wings
+ * separate.
+ */
+export function chevronPoints(size: number): string {
+  const s = Math.max(0, size);
+  const half = s / 2;
+  return `${half},0 ${s},${s} ${half},${s * 0.7} 0,${s}`;
+}
+
+/**
+ * The square the whole puck occupies: whichever layer reaches furthest.
+ *
+ * Every layer is centred in it, so an app centres this ONE box on the
+ * coordinate and the dot lands on the coordinate — the positioning contract
+ * `map-marker` already publishes ("it positions nothing; centre it on the
+ * point"). The halo is a diameter, the cone reaches `length` from the centre in
+ * one direction but needs the full box to rotate inside.
+ */
+export function puckBoxSize(options: {
+  accuracyRadius?: number;
+  coneLength?: number;
+  cone: boolean;
+}): number {
+  const { dot, ring } = LOCATION_PUCK_GEOMETRY;
+  const puck = dot + ring * 2;
+  const halo = options.accuracyRadius !== undefined && Number.isFinite(options.accuracyRadius)
+    ? Math.max(0, options.accuracyRadius) * 2
+    : 0;
+  const cone = options.cone
+    ? Math.max(0, options.coneLength ?? LOCATION_PUCK_GEOMETRY.cone) * 2
+    : 0;
+  return Math.max(puck, halo, cone);
+}
+
+// ---------------------------------------------------------------------------
+//  The announcement
+// ---------------------------------------------------------------------------
+
+/**
+ * What a screen reader hears instead of a coloured dot.
+ *
+ * The STATE comes first, because it is the part that is not recoverable by
+ * looking: "your last known location" is the whole difference between a map
+ * that is following you and one that stopped. The heading is added only when
+ * there is one — a bearing the device did not measure must not be spoken any
+ * more than it may be drawn.
+ */
+export function describeLocationPuck(options: {
+  state: LocationPuckState;
+  mode: LocationPuckMode;
+  heading?: number;
+  headingUnknown?: boolean;
+  labels?: Partial<Record<LocationPuckState, string>>;
+}): string {
+  const word = options.labels?.[options.state] ?? LOCATION_PUCK_STATE_LABELS[options.state];
+  const drawsHeading =
+    !options.headingUnknown && options.heading !== undefined && Number.isFinite(options.heading);
+  if (!drawsHeading) return word;
+  return `${word}, facing ${Math.round(normalizeHeading(options.heading))} degrees`;
+}

package/src/location-puck/types.ts

@@ -0,0 +1,79 @@
+import type { StyleProp, ViewStyle } from 'react-native';
+
+/**
+ * How trustworthy the position under the puck is.
+ *
+ * `locating` is "we are still working it out" — the dot pulses and the halo
+ * breathes, because a still puck over a wrong coordinate reads as a fix.
+ * `located` is a live fix and stands still. `stale` is a position that is no
+ * longer being updated: it goes quiet, loses the accent, and SAYS SO, because
+ * a dimmer dot is not a sentence and a reader who cannot see it has no other
+ * way of learning that the map is showing where you were.
+ */
+export type LocationPuckState = 'locating' | 'located' | 'stale';
+
+/**
+ * What the map underneath is doing, which is what decides where the cone
+ * points and whether there is a cone at all.
+ *
+ * `following` — the map is north-up and the puck turns inside it.
+ * `compass` — the map turns so the heading is always up, so the cone is drawn
+ *   straight up and the app's own rotation does the rest. Passing the heading
+ *   AND rotating the map would turn the cone twice.
+ * `navigating` — the puck is a chevron on a route. The chevron IS the
+ *   direction, so no cone is drawn beside it.
+ */
+export type LocationPuckMode = 'following' | 'compass' | 'navigating';
+
+export interface LocationPuckProps {
+  /** Default `located`. */
+  state?: LocationPuckState;
+  /** Default `following`. */
+  mode?: LocationPuckMode;
+  /**
+   * Which way you are facing, in degrees clockwise from north. Turns the cone
+   * in `following`, and the chevron in `navigating`; ignored in `compass`,
+   * where the map itself is what turned.
+   */
+  heading?: number;
+  /**
+   * The platform's own ± uncertainty for {@link heading}, in DEGREES, and the
+   * cone's half-width: the wedge is the uncertainty, drawn. Clamped into
+   * `[coneMinHalfAngle, coneMaxHalfAngle]`, and defaulted to the minimum when
+   * the platform reports nothing.
+   */
+  headingAccuracy?: number;
+  /**
+   * No heading at all — draws NO cone. A guessed cone is worse than none: it
+   * is a confident claim about the one thing the device could not measure.
+   */
+  headingUnknown?: boolean;
+  /**
+   * The accuracy halo's radius in PIXELS. The app computes it from its own map
+   * projection (metres at this latitude and zoom → pixels) and re-renders on
+   * zoom, exactly as it does for `MapAreaCircle` — which is the circle this
+   * draws.
+   *
+   * Without it no halo is drawn: a halo of an invented size is a claim about
+   * precision nobody measured.
+   */
+  accuracyRadius?: number;
+  /** How far the cone reaches, in pixels. Default {@link LOCATION_PUCK_GEOMETRY}`.cone`. */
+  coneLength?: number;
+  /**
+   * The puck's announced name. Defaults to the sentence
+   * {@link describeLocationPuck} builds from the state, the mode and the
+   * heading — a coloured dot says nothing aloud.
+   */
+  accessibilityLabel?: string;
+  /** Replaces the English state words. */
+  stateLabels?: Partial<Record<LocationPuckState, string>>;
+  /**
+   * Force the pulse off regardless of the OS preference. Omitted, the puck
+   * reads the platform's reduced-motion setting and stands still when it is on.
+   */
+  reducedMotion?: boolean;
+  style?: StyleProp<ViewStyle>;
+  /** Parts get `<testID>-halo`, `-cone`, `-dot`, `-chevron`. */
+  testID?: string;
+}