@molecule/app-bias-indicator-react

Auto-generated, AI-first package reference for the molecule.dev ecosystem. It is written to be read by coding agents as much as by people, and is generated from this package's source — edit src/index.ts JSDoc, not this file.

React political-bias / source-credibility indicator.

Exports <BiasIndicator> — left/right scale with marker plus optional reliability dot/chip — for news-aggregator article headers and dense article lists (compact variant).

Quick Start

import { BiasIndicator } from '@molecule/app-bias-indicator-react'

;<BiasIndicator bias={-0.4} reliability={0.8} sourceLabel="Reuters" />

Type

feature

Installation

npm install @molecule/app-bias-indicator-react @molecule/app-react @molecule/app-ui react
npm install -D @types/react

API

Interfaces

`BiasIndicatorProps`

Props for <BiasIndicator>.

interface BiasIndicatorProps {
  /**
   * Bias scalar from `-1` (far left) through `0` (center) to `+1`
   * (far right). Values are clamped before rendering.
   */
  bias: number
  /**
   * Optional source-credibility / reliability score from `0` (lowest /
   * disputed) to `1` (highest). When omitted, no reliability indicator
   * is rendered.
   */
  reliability?: number
  /**
   * Compact variant collapses the scale to a single coloured dot —
   * useful for dense lists. Defaults to `false`.
   */
  compact?: boolean
  /** Optional source name (e.g. `'Reuters'`). Renders as a small caption. */
  sourceLabel?: ReactNode
  /** Extra classes to merge onto the root element. */
  className?: string
  /** `data-mol-id` for AI-agent / E2E selectors. */
  dataMolId?: string
}

Types

`BiasBucket`

Bias bucket — drives the bias-marker hue and the screen-reader label. Derived from a -1..1 bias scalar by biasToBucket.

type BiasBucket = 'far-left' | 'left' | 'center' | 'right' | 'far-right'

`ReliabilityTier`

Reliability tier — drives the colour + label of the optional dot/chip. Mapped from a 0..1 reliability score by reliabilityToTier.

type ReliabilityTier = 'high' | 'medium' | 'low' | 'disputed'

Functions

`BiasIndicator(props)`

Political-bias / source-credibility indicator for news article headers. Renders a horizontal -1..+1 scale with a coloured marker at bias, plus an optional reliability dot/chip below. The compact variant collapses to a single coloured dot, suitable for dense article lists.

Colours come from semantic CSS custom properties (--color-info, --color-warning, --color-error, --color-success, --color-foreground-secondary) so per-app theming flows through without code changes.

function BiasIndicator({
  bias,
  reliability,
  compact = false,
  sourceLabel,
  className,
  dataMolId,
}: BiasIndicatorProps): ReactElement<unknown, string | JSXElementConstructor<any>>

props — Component props.
props.bias — Bias scalar (-1 far left … +1 far right).
props.reliability — Optional 0..1 reliability score.
props.compact — Render only the coloured dot.
props.sourceLabel — Optional source caption.
props.className — Extra classes.
props.dataMolId — data-mol-id for AI / E2E selectors.

Returns: The rendered indicator.

`biasToBucket(bias)`

Map a -1..1 bias scalar into a coarse five-bucket label used for accessibility and colouring. Boundaries: <= -0.6 far-left, <= -0.2 left, < 0.2 center, < 0.6 right, otherwise far-right.

function biasToBucket(bias: number): BiasBucket

bias — Bias scalar (clamped to [-1, 1] first).

Returns: The bias bucket.

`biasToPercent(bias)`

Convert a -1..1 bias value into a 0..100 percent offset for absolute positioning along the scale track.

function biasToPercent(bias: number): number

bias — Bias scalar (clamped to [-1, 1] first).

Returns: The percent offset from the left edge of the track.

`bucketColor(bucket)`

Resolve the marker colour for a given bias bucket. Uses semantic CSS custom properties so swapping themes / styling libraries does not require touching this component.

function bucketColor(bucket: BiasBucket): string

bucket — Bias bucket.

Returns: A var(--…) CSS color string.

`clamp(value, min, max)`

Clamp a number into the inclusive [min, max] range.

function clamp(value: number, min: number, max: number): number

value — Value to clamp.
min — Lower bound.
max — Upper bound.

Returns: The clamped value.

`reliabilityToTier(reliability)`

Map a 0..1 reliability score into a four-tier label. Boundaries: >= 0.75 high, >= 0.5 medium, >= 0.25 low, otherwise disputed.

function reliabilityToTier(reliability: number): ReliabilityTier

reliability — Reliability scalar (clamped to [0, 1] first).

Returns: The reliability tier.

`tierColor(tier)`

Resolve the dot colour for a given reliability tier.

function tierColor(tier: ReliabilityTier): string

tier — Reliability tier.