@oxy.so/bloom 4.0.0 → 4.1.0

package/src/job-board/index.ts

@@ -0,0 +1,34 @@
+export { JobBoard } from './JobBoard';
+export { JobCard } from './JobCard';
+export {
+  JOB_BOARD_GEOMETRY,
+  JOB_BOARD_LABELS,
+  JOB_BOARD_SORTS,
+  JOB_DISTANCE_BANDS,
+  JOB_STATE_TONE,
+  JOB_VEHICLE_KINDS,
+  JOB_WHEN_BANDS,
+} from './constants';
+export type { JobBoardGeometry } from './constants';
+export {
+  countActiveJobFilters,
+  filterJobOffers,
+  jobActionsAreLabelled,
+  joinJobName,
+  resolveJobPaint,
+  sortJobOffers,
+  toggleJobVehicle,
+} from './shared';
+export type { JobPaint } from './shared';
+export type {
+  JobBoardBand,
+  JobBoardFilter,
+  JobBoardLabels,
+  JobBoardProps,
+  JobBoardSort,
+  JobCardDensity,
+  JobCardProps,
+  JobOffer,
+  JobOfferState,
+  JobPlace,
+} from './types';

package/src/job-board/shared.ts

@@ -0,0 +1,212 @@
+/**
+ * What `JobCard` paints, and the pure decisions the board is built on.
+ *
+ * The paint is RELATIVE, for the reason every commerce family here computes one
+ * the same way: the card is a `Card` on a board and a bare row inside a sheet,
+ * and a ramp stop picked here would be right for one of them and invisible on
+ * the other. Everything comes off the fill the content actually lands on
+ * (`styles/surface-levels.ts`).
+ *
+ * The ORDER and the FILTER are pure and exported because both are claims about
+ * a SET — ties, a job with no number for the key, a board of one — and those
+ * are boundaries a render-level test can only reach by building six fixtures.
+ */
+import { interactiveWebCss } from '../styles/interactive-web-css';
+import { hairlineOn, surfaceFillOn, surfaceTextOn } from '../styles/surface-levels';
+import type { SurfaceTextPaint } from '../styles/surface-levels';
+import type { Theme } from '../theme/types';
+import type { JobBoardFilter, JobBoardSort, JobOffer } from './types';
+
+export interface JobPaint {
+  /** The fill the content lands on — the card's, or the ambient one at compact. */
+  surface: string;
+  /** The rule over the action footer, and the breakdown's own divider. */
+  hairline: string;
+  /** The next fill UP: a tile, the mark, the wash a bare press target takes. */
+  tile: string;
+  text: string;
+  textSecondary: string;
+  textTertiary: string;
+  /** The text rungs that clear AA on a TILE, which is not the card's fill. */
+  tileText: SurfaceTextPaint;
+  /** The looked-at card's border, and the focus ring. */
+  accent: string;
+}
+
+export function resolveJobPaint(theme: Theme, surface: string): JobPaint {
+  const text = surfaceTextOn(theme, surface);
+  const tile = surfaceFillOn(theme, surface);
+  return {
+    surface,
+    hairline: hairlineOn(theme, surface),
+    tile,
+    text: text.text,
+    textSecondary: text.textSecondary,
+    textTertiary: text.textTertiary,
+    tileText: surfaceTextOn(theme, tile),
+    accent: theme.colors.primary,
+  };
+}
+
+/**
+ * Whether the card's actions carry their LABELS at this width.
+ *
+ * A pure function of the measured width so the threshold can be walked without
+ * a layout pass — `onLayout` never fires in jsdom, and a threshold only a
+ * browser exercises is a threshold nothing pins. Before the first layout the
+ * width is `null` and the labels are ON: an unmeasured card is one the caller
+ * has not constrained, and the label is the better of the two guesses.
+ */
+export function jobActionsAreLabelled(width: number | null, narrowWidth: number): boolean {
+  return width === null || width >= narrowWidth;
+}
+
+/**
+ * The jobs in the order the board draws them.
+ *
+ * Every key is a NUMBER the caller supplied for comparison only — this family
+ * never reads a formatted amount — so a job with no number for the current
+ * order cannot be placed against one that has a number, and goes LAST. Within
+ * the missing group the caller's own order is kept, because there is nothing
+ * left to sort on and re-shuffling a group of equals makes a board jump for no
+ * visible reason.
+ *
+ * PAY sorts HIGH first; everything else sorts LOW first. A courier scanning for
+ * money wants the biggest number, and scanning for distance or for time wants
+ * the smallest, so one direction for all four would be wrong three times.
+ *
+ * Stable: equal keys keep their input order.
+ */
+export function sortJobOffers(jobs: readonly JobOffer[], sort: JobBoardSort): JobOffer[] {
+  const key = (job: JobOffer): number | undefined => {
+    if (sort === 'pay') return job.payValue;
+    if (sort === 'distance') return job.distanceKm;
+    if (sort === 'soonest') return job.startsInMinutes;
+    return job.expiresInMinutes;
+  };
+  const direction = sort === 'pay' ? -1 : 1;
+  return jobs
+    .map((job, index) => ({ job, index, key: key(job) }))
+    .sort((a, b) => {
+      if (a.key === undefined && b.key === undefined) return a.index - b.index;
+      if (a.key === undefined) return 1;
+      if (b.key === undefined) return -1;
+      if (a.key === b.key) return a.index - b.index;
+      return (a.key - b.key) * direction;
+    })
+    .map((entry) => entry.job);
+}
+
+/**
+ * The jobs the filter admits, in the order they arrived.
+ *
+ * **A FILTER CANNOT EXCLUDE WHAT IT CANNOT MEASURE.** A job with no
+ * `distanceKm` survives every distance band, and one with no `payValue`
+ * survives every pay floor. The alternative — dropping it — hides work from a
+ * courier because the app omitted a field, which is the failure mode of every
+ * filter that treats a missing value as a zero.
+ *
+ * The four questions are independent and combine with AND. An omitted or `null`
+ * band is "any" and asks nothing; an empty `vehicles` array is "any" too,
+ * because a filter nobody has narrowed must not empty the board.
+ *
+ * STATE IS NOT A FILTER. A taken or expired job stays: see {@link JobOfferState}.
+ */
+export function filterJobOffers(
+  jobs: readonly JobOffer[],
+  filter: JobBoardFilter | undefined,
+): JobOffer[] {
+  if (filter === undefined) return [...jobs];
+  const { maxDistanceKm, minPay, startsWithinMinutes, vehicles } = filter;
+  return jobs.filter((job) => {
+    if (
+      maxDistanceKm !== undefined &&
+      maxDistanceKm !== null &&
+      job.distanceKm !== undefined &&
+      job.distanceKm > maxDistanceKm
+    )
+      return false;
+    if (
+      minPay !== undefined &&
+      minPay !== null &&
+      job.payValue !== undefined &&
+      job.payValue < minPay
+    )
+      return false;
+    if (
+      startsWithinMinutes !== undefined &&
+      startsWithinMinutes !== null &&
+      job.startsInMinutes !== undefined &&
+      job.startsInMinutes > startsWithinMinutes
+    )
+      return false;
+    if (
+      vehicles !== undefined &&
+      vehicles.length > 0 &&
+      job.vehicleKind !== undefined &&
+      !vehicles.includes(job.vehicleKind)
+    )
+      return false;
+    return true;
+  });
+}
+
+/** How many of the four dimensions the reader has narrowed. Pure. */
+export function countActiveJobFilters(filter: JobBoardFilter | undefined): number {
+  if (filter === undefined) return 0;
+  let count = 0;
+  if (filter.maxDistanceKm !== undefined && filter.maxDistanceKm !== null) count += 1;
+  if (filter.minPay !== undefined && filter.minPay !== null) count += 1;
+  if (filter.startsWithinMinutes !== undefined && filter.startsWithinMinutes !== null) count += 1;
+  if (filter.vehicles !== undefined && filter.vehicles.length > 0) count += 1;
+  return count;
+}
+
+/**
+ * The vehicle set after pressing one of its chips.
+ *
+ * A vehicle row is a set of TOGGLES, not a radiogroup: a courier with a van can
+ * take a bike job, and "van or box truck" is a sentence the board has to be able
+ * to say. Pressing the only selected vehicle clears the dimension rather than
+ * leaving a set nothing can be added to.
+ */
+export function toggleJobVehicle<T extends string>(
+  vehicles: readonly T[] | undefined,
+  vehicle: T,
+): T[] {
+  const current = vehicles ?? [];
+  return current.includes(vehicle)
+    ? current.filter((item) => item !== vehicle)
+    : [...current, vehicle];
+}
+
+/** Joins the non-empty parts of an accessible name. */
+export function joinJobName(
+  parts: ReadonlyArray<string | number | false | null | undefined>,
+  separator = ', ',
+): string {
+  return parts
+    .map((part) => (typeof part === 'number' ? String(part) : part))
+    .filter((part): part is string => typeof part === 'string' && part !== '')
+    .join(separator);
+}
+
+// ---------------------------------------------------------------------------
+//  Keyboard focus on web
+//
+//  The load block is a react-native-web `Pressable`: focusable, with the
+//  outline reset, so without a `:focus-visible` rule a keyboard user tabs
+//  through an invisible stop. Inline styles carry no pseudo-classes, so the
+//  rule lives in an adopted sheet hanging off a `dataSet` attribute, and the
+//  ring colour is a per-instance custom property because it is a resolved
+//  token.
+// ---------------------------------------------------------------------------
+
+export const JOB_BOARD_STYLE_ID = 'bloom-job-board-web-css';
+
+export const JOB_BOARD_WEB_CSS = interactiveWebCss({
+  selector: '[data-bloom-job-subject]',
+  varPrefix: 'bloom-job',
+  reset: 'none',
+  transition: 'background-color 150ms ease',
+});

package/src/job-board/types.ts

@@ -0,0 +1,274 @@
+import type { ReactNode } from 'react';
+import type { StyleProp, ViewStyle } from 'react-native';
+
+import type { BloomIconComponent } from '../icons/icon-component';
+import type { PriceLine, PriceTotal } from '../price-breakdown';
+import type { VehicleKind } from '../vehicle-picker';
+
+/**
+ * Where a job has got to.
+ *
+ * `open` is takeable. `taken` and `expired` are CLOSED, and they are a state
+ * rather than an absence on purpose: a job the board removed under the reader's
+ * thumb is a row that vanished mid-press, which is indistinguishable from a
+ * mis-tap. A closed job keeps its place and says what happened to it.
+ */
+export type JobOfferState = 'open' | 'taken' | 'expired';
+
+/** What the board orders by. */
+export type JobBoardSort = 'pay' | 'distance' | 'soonest' | 'expiring';
+
+/** `comfortable` is the board; `compact` fits a sheet or a side panel. */
+export type JobCardDensity = 'comfortable' | 'compact';
+
+/**
+ * One end of the job, or a stop along it.
+ *
+ * It is the shape `RouteStops` draws and nothing more — `JobCard` hands these
+ * straight to that family rather than drawing a second pin column of its own.
+ */
+export interface JobPlace {
+  /** The line the stop is recognised by — "Rua das Amoreiras 12". */
+  title: string;
+  /** The rest of it — "Third floor, no lift". */
+  subtitle?: string;
+  /** A short trailing reading — "2.1 km away". */
+  meta?: string;
+}
+
+export interface JobOffer {
+  /** Identifies the job to `onTake` / `onPass` / `onPressJob`, and keys the row. */
+  id: string;
+  /** What is being moved — "Two-seater sofa", "Six catering trays". */
+  load: string;
+  /** A second line about the load — "Heavy; two people at the top floor". */
+  loadNote?: string;
+  /**
+   * What the job pays the person who takes it, PRE-FORMATTED with its currency:
+   * `"€38.40"`. Nothing in this family parses, sums, converts or rounds an
+   * amount.
+   */
+  pay: string;
+  /** A quieter line under the pay — "Fuel and tolls included". */
+  payNote?: string;
+  /** What the pay is made of, handed to `PriceSummary` unchanged. */
+  payLines?: readonly PriceLine[];
+  /** The summary's own total row. Without it the breakdown draws the lines and no rule. */
+  payTotal?: PriceTotal;
+  /** Where it starts. */
+  pickup: JobPlace;
+  /** Where it ends. */
+  dropoff: JobPlace;
+  /** Anything between them, in order. */
+  via?: readonly JobPlace[];
+  /** How far the whole job is — "11.4 km". A reading, never a number to compare. */
+  distance?: string;
+  /** How long it should take — "about 40 min". */
+  duration?: string;
+  /** When it has to happen — "Today, 14:00–16:00". */
+  window?: string;
+  /** What it has to be carried in — "Van". Drawn beside the load. */
+  vehicle?: string;
+  /** The vehicle's glyph, drawn in the mark. Defaults to the one for `vehicleKind`. */
+  vehicleIcon?: BloomIconComponent;
+  /** The vehicle the board FILTERS on. Never drawn; `vehicle` is the words. */
+  vehicleKind?: VehicleKind;
+  /** How long the offer stands — "Open for 12 min". Drawn as a warning-toned line. */
+  expiresIn?: string;
+  /** Short nouns drawn as pills after the load — "Two people", "Fragile". */
+  tags?: readonly string[];
+  /** Default `open`. */
+  state?: JobOfferState;
+  /**
+   * The pay as a NUMBER, for ordering and for the pay filter only. Never drawn,
+   * never formatted, and in whatever unit the app compares in — this family
+   * only ever asks which of two is larger. A job without it sorts last and
+   * survives every pay filter, because a filter cannot exclude what it cannot
+   * measure.
+   */
+  payValue?: number;
+  /** The distance in km, for ordering and the distance filter. Same rules. */
+  distanceKm?: number;
+  /** Minutes until the job STARTS, for ordering and the when filter. Same rules. */
+  startsInMinutes?: number;
+  /** Minutes until the offer CLOSES, for ordering. Same rules. */
+  expiresInMinutes?: number;
+}
+
+/** A band on one of the board's filters. `null` is the "any" rung. */
+export interface JobBoardBand {
+  /** The ceiling this band admits, or `null` for no ceiling. */
+  value: number | null;
+  /** The words on the chip — "Under 10 km", "Within the hour". */
+  label: string;
+}
+
+/**
+ * What the board is currently showing, as four independent questions. Every
+ * field left out is "any".
+ */
+export interface JobBoardFilter {
+  /** Jobs no further than this many km. */
+  maxDistanceKm?: number | null;
+  /** Jobs paying at least this, in the same unit as `payValue`. */
+  minPay?: number | null;
+  /** Jobs starting within this many minutes. */
+  startsWithinMinutes?: number | null;
+  /** Jobs for these vehicles. Empty or omitted is any. */
+  vehicles?: readonly VehicleKind[];
+}
+
+/** Every word the card and the board speak, in one prop. */
+export interface JobBoardLabels {
+  /** The take action. Default `"Take the job"`. */
+  take?: string;
+  /** The pass action. Default `"Pass"`. */
+  pass?: string;
+  /** Over the distance tile. Default `"Distance"`. */
+  distance?: string;
+  /** Over the duration tile. Default `"Time"`. */
+  duration?: string;
+  /** Over the window tile. Default `"Window"`. */
+  window?: string;
+  /** The pick-up stop's position. Default `"Pick-up"`. */
+  pickup?: string;
+  /** The drop-off stop's position. Default `"Drop-off"`. */
+  dropoff?: string;
+  /** The state a closed job announces. Defaults `"Taken"` and `"Expired"`. */
+  state?: Partial<Record<Exclude<JobOfferState, 'open'>, string>>;
+  /** The breakdown disclosure. Defaults `"Show what it pays"` / `"Hide what it pays"`. */
+  showPay?: string;
+  hidePay?: string;
+  /** Names the itemisation, before the load. Default `"Pay for"`. */
+  payDetails?: string;
+  /** The sort control's name. Default `"Sort jobs"`. */
+  sort?: string;
+  /** The filter disclosure. Default `"Filters"`. */
+  filtersToggle?: string;
+  /**
+   * Added to the disclosure's NAME when some dimensions are narrowed — the
+   * count is drawn as a bare numeral, which says nothing on its own. Default
+   * `` (count) => `${count} applied` ``.
+   */
+  filtersActive?: (count: number) => string;
+  /** The sort options. Defaults `"Best paid"`, `"Nearest"`, `"Starting soonest"`, `"Closing soonest"`. */
+  sortOptions?: Partial<Record<JobBoardSort, string>>;
+  /** Names each filter row. Defaults `"Distance"`, `"Pay"`, `"When"`, `"Vehicle"`. */
+  filters?: { distance?: string; pay?: string; when?: string; vehicle?: string };
+  /** The control that puts every filter back to "any". Default `"Clear filters"`. */
+  clearFilters?: string;
+  /** The refresh control's name — it draws a glyph and no text. Default `"Refresh the board"`. */
+  refresh?: string;
+  /** The board's heading. Default `` (count) => count === 1 ? '1 job' : `${count} jobs` ``. */
+  count?: (count: number) => string;
+  /** The loading board's name. Default `"Loading jobs"`. */
+  loading?: string;
+}
+
+export interface JobCardProps {
+  /** The job. */
+  job: JobOffer;
+  /** Draws the take action. Called with the job's id. Never drawn on a closed job. */
+  onTake?: (id: string) => void;
+  /** Draws the pass action. Called with the job's id. */
+  onPass?: (id: string) => void;
+  /** Makes the load block pressable — an app opens the job's detail from here. */
+  onPressJob?: (id: string) => void;
+  /** Draws the route between the job's ends. Default `true` at `comfortable`. */
+  route?: boolean;
+  /**
+   * Draws the itemisation behind a disclosure under the tiles. Default `true`
+   * when the job carries `payLines`; `false` never draws it.
+   */
+  breakdown?: boolean;
+  /** Starts the breakdown open. Default `false`. */
+  defaultBreakdownExpanded?: boolean;
+  /** Default `comfortable`. */
+  density?: JobCardDensity;
+  /** Paints the card as the job being looked at: the accent border. */
+  selected?: boolean;
+  /** Dims the card and stops every action, whatever the job's own state says. */
+  disabled?: boolean;
+  /** Replaces the two built-in actions entirely. */
+  actions?: ReactNode;
+  labels?: JobBoardLabels;
+  /** Overrides the composed name of the load block. */
+  accessibilityLabel?: string;
+  style?: StyleProp<ViewStyle>;
+  testID?: string;
+}
+
+export interface JobBoardProps {
+  /** The work on offer. Order is the board's, not the caller's — see `sort`. */
+  jobs: readonly JobOffer[];
+  /** Controlled sort. */
+  sort?: JobBoardSort;
+  /** Uncontrolled initial sort. Default `pay`. */
+  defaultSort?: JobBoardSort;
+  onSortChange?: (sort: JobBoardSort) => void;
+  /**
+   * Which orders are offered, in the order they are drawn. Default all four.
+   * An empty array draws no sort control.
+   */
+  sortOptions?: readonly JobBoardSort[];
+  /** Controlled filter. */
+  filter?: JobBoardFilter;
+  /** Uncontrolled initial filter. Default: every dimension "any". */
+  defaultFilter?: JobBoardFilter;
+  onFilterChange?: (filter: JobBoardFilter) => void;
+  /** The distance bands. Default {@link JOB_DISTANCE_BANDS}. Fewer than two draws no row. */
+  distanceBands?: readonly JobBoardBand[];
+  /**
+   * The pay bands. NO DEFAULT: a band is words plus an amount, and the amount
+   * is the app's currency, so a default here would invent one. Fewer than two
+   * draws no row.
+   */
+  payBands?: readonly JobBoardBand[];
+  /** The when bands. Default {@link JOB_WHEN_BANDS}. Fewer than two draws no row. */
+  whenBands?: readonly JobBoardBand[];
+  /**
+   * Which vehicles can be filtered on, in the order they are drawn. Default the
+   * five `vehicle-picker` knows. An empty array draws no row.
+   */
+  vehicleKinds?: readonly VehicleKind[];
+  /** Controlled filter disclosure. */
+  filtersOpen?: boolean;
+  /**
+   * Starts the filters open. Default `false` — a board is for reading work, and
+   * the four dimensions are a tool the reader opens. The control carries the
+   * count of what is narrowed, so a folded filter is never a hidden one.
+   */
+  defaultFiltersOpen?: boolean;
+  onFiltersOpenChange?: (open: boolean) => void;
+  /** Draws the count line over the board. Default `true`. */
+  showCount?: boolean;
+  /** Draws the refresh control, and calls this. Without it there is no control. */
+  onRefresh?: () => void;
+  /** Spins the refresh glyph and disables it. */
+  refreshing?: boolean;
+  /** Replaces the board with placeholder cards. */
+  loading?: boolean;
+  /** How many placeholders. Default `3`. */
+  loadingCount?: number;
+  /** Forwarded to every card. */
+  onTake?: (id: string) => void;
+  onPass?: (id: string) => void;
+  onPressJob?: (id: string) => void;
+  /** The job being looked at, if one is. */
+  selectedId?: string | null;
+  density?: JobCardDensity;
+  route?: boolean;
+  breakdown?: boolean;
+  /** The line over the empty state. Default `"No jobs right now"`. */
+  emptyTitle?: string;
+  /** Under it. Default explains that the filters may be the reason. */
+  emptyDescription?: string;
+  /** A control under the empty state. Without one, an active filter draws the clear control there. */
+  emptyAction?: ReactNode;
+  labels?: JobBoardLabels;
+  /** Names the board. Default `"Jobs"`. */
+  accessibilityLabel?: string;
+  style?: StyleProp<ViewStyle>;
+  /** Derives `-<job id>` for each card. */
+  testID?: string;
+}

package/src/location-puck/HeadingCone.tsx

@@ -0,0 +1,85 @@
+import React, { memo, useMemo } from 'react';
+import Svg, { Defs, Path, RadialGradient, Stop } from 'react-native-svg';
+
+import { LOCATION_PUCK_CONE_STOPS } from './constants';
+import { conePath } from './shared';
+
+/**
+ * The wedge that says which way you are facing: full at the dot, gone at its
+ * far end, and as wide as the device is unsure.
+ *
+ *   geometry   a `2 * length` square whose centre is the dot, so the caller can
+ *              rotate the whole box about that centre (see `conePath`)
+ *   fill       a RADIAL gradient from the apex outward — the fade has to run
+ *              along the cone's LENGTH, and a linear gradient fades along the
+ *              box instead, which leaves the two edges of the wedge brighter
+ *              than its middle at the same distance from the dot
+ *
+ * THE OPACITY IS NEVER IN THE COLOUR. `react-native-svg` parses `stopColor` for
+ * its RGB and drops any alpha inside it, so a shared `rgba()` token paints
+ * correctly on web and FULLY OPAQUE on native. Both stops take their opacity
+ * through `stopOpacity`, the prop SVG defines for it, from
+ * {@link LOCATION_PUCK_CONE_STOPS}.
+ */
+
+let coneIdCounter = 0;
+
+interface HeadingConeProps {
+  /** How far the wedge reaches from the dot, in pixels. */
+  length: number;
+  /** Half the wedge's width, in degrees. */
+  halfAngle: number;
+  /** The accent the cone is painted in — an OPAQUE colour, never one with alpha. */
+  color: string;
+  testID?: string;
+}
+
+function HeadingConeComponent({ length, halfAngle, color, testID }: HeadingConeProps) {
+  // Per instance, for the reason `GlassSurface` gives: two cones in one
+  // document would otherwise share a gradient id, and the survivor of an
+  // unmount would reference one that is gone.
+  const gradientId = useMemo(() => `bloom-heading-cone${coneIdCounter++}`, []);
+  const r = Math.max(0, length);
+  const size = r * 2;
+  const d = conePath(length, halfAngle);
+
+  return (
+    <Svg width={size} height={size} testID={testID}>
+      <Defs>
+        {/*
+          `gradientUnits="userSpaceOnUse"`, and that is the whole correctness of
+          this file. The DEFAULT, `objectBoundingBox`, resolves `cx`/`cy`/`r`
+          against the bounding box of the element that REFERENCES the gradient —
+          the wedge, not the square — so `0.5, 0.5` lands at the centre of the
+          wedge's own box, which is somewhere out along the cone and moves as
+          the angle widens. Measured in a browser: the fade started partway down
+          the cone and was brightest off to one side of it. In user space the
+          centre is the apex and the radius is the cone's length, exactly, for
+          every angle.
+        */}
+        <RadialGradient
+          id={gradientId}
+          gradientUnits="userSpaceOnUse"
+          cx={r}
+          cy={r}
+          r={r}
+        >
+          <Stop
+            offset={String(LOCATION_PUCK_CONE_STOPS.inner.offset)}
+            stopColor={color}
+            stopOpacity={LOCATION_PUCK_CONE_STOPS.inner.opacity}
+          />
+          <Stop
+            offset={String(LOCATION_PUCK_CONE_STOPS.outer.offset)}
+            stopColor={color}
+            stopOpacity={LOCATION_PUCK_CONE_STOPS.outer.opacity}
+          />
+        </RadialGradient>
+      </Defs>
+      <Path d={d} fill={`url(#${gradientId})`} testID={testID ? `${testID}-wedge` : undefined} />
+    </Svg>
+  );
+}
+
+export const HeadingCone = memo(HeadingConeComponent);
+HeadingCone.displayName = 'HeadingCone';