jfs-components 0.0.84 → 0.0.86

package/lib/typescript/src/components/FullscreenModal/FullscreenModal.d.ts

@@ -10,23 +10,20 @@ export type FullscreenModalProps = {
     /** Secondary line below the supporting paragraph (e.g. a price / timeline). */
     priceText?: string;
     /**
-     * Media rendered full-bleed behind the hero text and driven by the parallax
-     * scroll effect. Bring any renderer — most commonly a `LottiePlayer`, but an
-     * `Image`, `Video`, or `SvgXml` works too. Size it to fill the hero box
-     * (`heroHeight` tall, full modal width) and let it `cover` so that as the
-     * hero collapses in height the art is cropped, never distorted. `modes` are
-     * cascaded into it.
+     * Background media rendered full-bleed behind the hero text. Bring any
+     * renderer — most commonly an `Image`, but a `LottiePlayer`, `Video`, or
+     * `SvgXml` works too. It is laid out at the full modal width; size it with an
+     * aspect ratio (e.g. `<Image ratio={3 / 4} />`) so its height follows the
+     * width naturally. The media scrolls together with the rest of the content
+     * (no parallax). `modes` are cascaded into it.
      */
     heroMedia?: React.ReactNode;
-    /** Resting height of the hero region. Defaults to 420. */
-    heroHeight?: number;
     /**
-     * Collapsed height the hero shrinks to at full scroll. Defaults to
-     * `heroHeight * 0.45`. Only the height changes — the width is always full.
+     * Fallback height for the hero text region when no `heroMedia` is provided.
+     * When `heroMedia` is present, the hero height is driven entirely by the
+     * media's own aspect ratio and this value is ignored. Defaults to 420.
      */
-    heroMinHeight?: number;
-    /** Enable the scroll-driven hero collapse. Defaults to true. */
-    parallax?: boolean;
+    heroHeight?: number;
     /** Whether to render the floating close button (top-right). Defaults to true. */
     showClose?: boolean;
     /** Press handler for the close button. */
@@ -57,8 +54,9 @@ export type FullscreenModalProps = {
     testID?: string;
 };
 /**
- * FullscreenModal — a full-screen takeover surface with a parallax media hero,
- * a scrollable body, a floating close button, and a sticky `ActionFooter`.
+ * FullscreenModal — a full-screen takeover surface with a full-bleed media
+ * hero, a scrollable body, a floating close button, and a sticky
+ * `ActionFooter`.
  *
  * The component always themes itself with `context5: 'Fullscreen Modal'`
  * (non-overridable) so every nested component (Section, ListItem, Button,
@@ -66,14 +64,12 @@ export type FullscreenModalProps = {
  * That mode is cascaded into `children`, the footer, and the hero text via
  * `cloneChildrenWithModes` / the merged `modes` object.
  *
- * ### Parallax
- * As the user scrolls up, the hero collapses by **height only** (from
- * `heroHeight` to `heroMinHeight`) — its **full width is always preserved**.
- * The `heroMedia` is pinned to the top at a fixed size and `cover`-cropped by
- * the collapsing clip, so it keeps a perfect aspect ratio the whole time
- * (never scaled or squished). Because it collapses slower than the content
- * scrolls, the media lags behind for the parallax depth cue. Disable with
- * `parallax={false}`.
+ * ### Hero
+ * The `heroMedia` is rendered full modal width inside the scroll body and
+ * takes its height from its own aspect ratio. The hero text (eyebrow /
+ * headline / supporting / price) is overlaid on top, anchored to the bottom.
+ * The whole hero scrolls together with the rest of the content — there is no
+ * parallax effect.
  *
  * @component
  * @example
@@ -83,7 +79,7 @@ export type FullscreenModalProps = {
  *   headline="Get more from your money."
  *   supportingText="JioFinance+ is your upgraded financial experience…"
  *   priceText="₹999/year · ₹0 until 2027"
- *   heroMedia={<LottiePlayer source={hero} size={{ width: 360, height: 420 }} />}
+ *   heroMedia={<Image imageSource={hero} ratio={3 / 4} />}
  *   primaryActionLabel="Upgrade for free"
  *   disclaimer="By upgrading, we'll check your eligibility with Experian."
  *   onPrimaryAction={() => upgrade()}
@@ -94,6 +90,6 @@ export type FullscreenModalProps = {
  * </FullscreenModal>
  * ```
  */
-declare function FullscreenModal({ eyebrow, headline, supportingText, priceText, heroMedia, heroHeight, heroMinHeight, parallax, showClose, onClose, closeAccessibilityLabel, footer, primaryActionLabel, onPrimaryAction, disclaimer, backgroundColor, children, modes: propModes, style, contentContainerStyle, testID, }: FullscreenModalProps): import("react/jsx-runtime").JSX.Element;
+declare function FullscreenModal({ eyebrow, headline, supportingText, priceText, heroMedia, heroHeight, showClose, onClose, closeAccessibilityLabel, footer, primaryActionLabel, onPrimaryAction, disclaimer, backgroundColor, children, modes: propModes, style, contentContainerStyle, testID, }: FullscreenModalProps): import("react/jsx-runtime").JSX.Element;
 export default FullscreenModal;
 //# sourceMappingURL=FullscreenModal.d.ts.map

package/lib/typescript/src/components/MetricLegendItem/MetricLegendItem.d.ts

@@ -13,6 +13,12 @@ export type MetricLegendItemProps = {
      * `metricLegendItem/indicator/bg` design token.
      */
     indicatorColor?: string;
+    /**
+     * Shape of the leading indicator. `'dot'` (default) renders the small
+     * circle used in categorical legends; `'line'` renders a short
+     * horizontal bar, matching the legend of a line chart.
+     */
+    indicatorShape?: 'dot' | 'line';
     /** Design token modes for theming (e.g. `{ 'Color Mode': 'Light' }`). */
     modes?: Record<string, any>;
     /** Override container styles. */
@@ -32,6 +38,6 @@ export type MetricLegendItemProps = {
  * @component
  * @param {MetricLegendItemProps} props
  */
-declare function MetricLegendItem({ label, value, indicatorColor, modes, style, indicatorStyle, labelStyle, valueStyle, }: MetricLegendItemProps): import("react/jsx-runtime").JSX.Element;
+declare function MetricLegendItem({ label, value, indicatorColor, indicatorShape, modes, style, indicatorStyle, labelStyle, valueStyle, }: MetricLegendItemProps): import("react/jsx-runtime").JSX.Element;
 export default MetricLegendItem;
 //# sourceMappingURL=MetricLegendItem.d.ts.map

package/lib/typescript/src/components/index.d.ts

@@ -38,6 +38,7 @@ export { default as CircularProgressBarDoted, type CircularProgressBarDotedProps
 export { default as CircularRating, type CircularRatingProps } from './CircularRating/CircularRating';
 export { default as CoverageRing, type CoverageRingProps } from './CoverageRing/CoverageRing';
 export { default as CoverageBarComparison, type CoverageBarComparisonProps, type CoverageBarComparisonItem } from './CoverageBarComparison/CoverageBarComparison';
+export { default as AllocationComparisonChart, type AllocationComparisonChartProps, type AllocationSegment } from './AllocationComparisonChart/AllocationComparisonChart';
 export { default as MonthlyStatusGrid, CalendarGlyph, type MonthlyStatusGridProps, type MonthlyStatusGridMonth, type MonthlyStatus, type CalendarGlyphProps } from './MonthlyStatusGrid/MonthlyStatusGrid';
 export { default as Gauge, type GaugeProps } from './Gauge/Gauge';
 export { default as HoldingsCard, type HoldingsCardProps } from './HoldingsCard/HoldingsCard';
@@ -101,6 +102,9 @@ export { default as RadioButton, type RadioButtonProps } from './RadioButton/Rad
 export { default as RechargeCard, type RechargeCardProps } from './RechargeCard/RechargeCard';
 export { default as SavingsGoalSummary, type SavingsGoalSummaryProps, type SavingsGoalSummaryItem } from './SavingsGoalSummary/SavingsGoalSummary';
 export { default as DonutChart, type DonutChartProps, type DonutChartSegmentData, type DonutChartSegmentProps, DonutChartSegment } from './DonutChart/DonutChart';
+export { default as AreaLineChart, useChart, type AreaLineChartProps, type ChartSeries, type ChartPoint, type ChartInset, type GoalPinConfig, type ChartGridProps, type ChartXAxisProps, type ChartYAxisProps, type ChartGoalPinProps } from './AreaLineChart/AreaLineChart';
+export { default as ClusterBubble, type ClusterBubbleProps, type ClusterBubbleLabelPlacement, type ClusterBubbleLabelDirection } from './ClusterBubble/ClusterBubble';
+export { default as BubbleChart, type BubbleChartProps, type BubbleDatum } from './BubbleChart/BubbleChart';
 export { default as DonutChartSummary, type DonutChartSummaryProps, type DonutChartSummaryItem } from './DonutChartSummary/DonutChartSummary';
 export { default as RangeTrack, type RangeTrackProps, type RangeTrackTab, type RangeTrackItem } from './RangeTrack/RangeTrack';
 export { default as SegmentedTrack, type SegmentedTrackProps, type SegmentedTrackSegmentData, type SegmentedTrackSegmentProps, SegmentedTrackSegment } from './SegmentedTrack/SegmentedTrack';

package/lib/typescript/src/icons/registry.d.ts

@@ -4,7 +4,7 @@
  * Auto-generated from SVG files in src/icons/
  * DO NOT EDIT MANUALLY - Run "npm run icons:generate" to regenerate
  *
- * Generated: 2026-06-01T15:33:15.385Z
+ * Generated: 2026-06-03T15:59:02.370Z
  */
 export declare const iconRegistry: Record<string, {
     path: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "jfs-components",
-  "version": "0.0.84",
+  "version": "0.0.86",
   "description": "React Native Jio Finance Components Library",
   "author": "sunshuaiqi@gmail.com",
   "license": "MIT",

package/src/components/AllocationComparisonChart/AllocationComparisonChart.tsx

@@ -0,0 +1,450 @@
+import React from 'react'
+import {
+    View,
+    Text,
+    type StyleProp,
+    type TextStyle,
+    type ViewStyle,
+} from 'react-native'
+import Svg, { Line } from 'react-native-svg'
+import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
+import { useTokens } from '../../design-tokens/JFSThemeProvider'
+import { EMPTY_MODES } from '../../utils/react-utils'
+import MetricLegendItem from '../MetricLegendItem/MetricLegendItem'
+
+/**
+ * One vertical pill in the {@link AllocationComparisonChartProps.data} array.
+ *
+ * Each segment renders a single bar whose **height encodes `value`** (the
+ * "current" reading) and, when supplied, a **`baseline`** overlay drawn from
+ * the bottom up with a dashed marker line (the "recommended" reading). Both
+ * are measured against the same shared scale so bars and baselines are
+ * directly comparable across segments.
+ */
+export type AllocationSegment = {
+    /** Stable React key (falls back to the array index). */
+    key?: React.Key
+    /** Caption rendered under the bar — e.g. `"Small & Mid"`. */
+    label: React.ReactNode
+    /**
+     * Primary value driving the bar's height (the "current" reading). Scaled
+     * against {@link AllocationComparisonChartProps.max}.
+     */
+    value: number
+    /**
+     * Optional comparison value (the "recommended" reading). When provided, a
+     * filled overlay is drawn from the bottom of the bar up to this level.
+     * Omit to render a plain bar.
+     */
+    baseline?: number
+    /**
+     * Whether to draw the dashed reference line + value label at the top of the
+     * `baseline` overlay. Defaults to `true` **only for the first segment that
+     * has a `baseline`** and `false` for the rest, so the marker stays a
+     * focused callout rather than repeating on every bar. Set explicitly to
+     * force it on/off per segment. Has no effect without a `baseline`.
+     */
+    showMarker?: boolean
+    /**
+     * Text shown above the bar. Defaults to `formatValue(value)`. Pass `null`
+     * to hide it.
+     */
+    valueLabel?: React.ReactNode
+    /**
+     * Text shown beside the dashed baseline marker. Defaults to
+     * `formatValue(baseline)`. Pass `null` to hide just the marker label while
+     * keeping the dashed line.
+     */
+    baselineLabel?: React.ReactNode
+    /** Hard-override the bar (current) fill color. */
+    color?: string
+    /** Hard-override the baseline (recommended) overlay color. */
+    baselineColor?: string
+    /** Per-segment accessibility label. */
+    accessibilityLabel?: string
+}
+
+export type AllocationComparisonChartProps = {
+    /**
+     * The segments to plot, left → right. Each carries its `value`, optional
+     * `baseline` and its `label`, so a bar can never drift from its caption.
+     */
+    data?: AllocationSegment[]
+    /**
+     * Maximum value used to scale every bar **and** baseline. Defaults to the
+     * largest `value`/`baseline` across `data`. Pass an explicit `max` (e.g.
+     * `100` for percentages) for a fixed scale.
+     */
+    max?: number
+    /**
+     * Height in px of the bar area — i.e. the height of a bar whose value
+     * equals `max`. Excludes the value/caption label rows. Default: `154`.
+     */
+    height?: number
+    /** Width of each pill bar in px. Default: the `segmentIndicator/track/width` token (`28`). */
+    barWidth?: number
+    /** Show the legend row above the chart. Default: `true`. */
+    showLegend?: boolean
+    /** Legend label for the bar (current) series. Default: `"Current"`. */
+    valueLegendLabel?: React.ReactNode
+    /**
+     * Legend label for the baseline (recommended) series. Default:
+     * `"Recommended"`. The baseline legend item only appears when at least one
+     * segment defines a `baseline`.
+     */
+    baselineLegendLabel?: React.ReactNode
+    /**
+     * Formats numeric `value`/`baseline` into the default labels. Default:
+     * `(v) => \`${v}%\``.
+     */
+    formatValue?: (value: number) => string
+    /** Design token modes for theming (e.g. `{ 'Color Mode': 'Light' }`). */
+    modes?: Record<string, any>
+    /** Container style override. */
+    style?: StyleProp<ViewStyle>
+    /** Style applied to the bars row. */
+    chartStyle?: StyleProp<ViewStyle>
+    /** Style applied to the legend row. */
+    legendStyle?: StyleProp<ViewStyle>
+    /** Accessibility label for the whole chart. */
+    accessibilityLabel?: string
+}
+
+const DEFAULT_DATA: AllocationSegment[] = [
+    { label: 'Small & Mid', value: 65, baseline: 35 },
+    { label: 'Large', value: 25 },
+    { label: 'Others', value: 10 },
+]
+
+const toNumber = (value: unknown, fallback: number): number => {
+    if (typeof value === 'number') {
+        return Number.isFinite(value) ? value : fallback
+    }
+    if (typeof value === 'string') {
+        const parsed = Number(value)
+        return Number.isFinite(parsed) ? parsed : fallback
+    }
+    return fallback
+}
+
+const toFontWeight = (
+    value: unknown,
+    fallback: TextStyle['fontWeight']
+): TextStyle['fontWeight'] => {
+    if (typeof value === 'number') {
+        return String(value) as TextStyle['fontWeight']
+    }
+    if (typeof value === 'string') {
+        return value as TextStyle['fontWeight']
+    }
+    return fallback
+}
+
+const isShown = (node: React.ReactNode): boolean =>
+    node !== undefined && node !== null && node !== false
+
+type SegmentTheme = {
+    barWidth: number
+    pillRadius: number
+    gap: number
+    currentColor: string
+    baselineColor: string
+    lineColor: string
+    lineSize: number
+    labelStyle: TextStyle
+}
+
+type SegmentBarProps = {
+    segment: AllocationSegment
+    barHeightPx: number
+    baselineHeightPx: number | null
+    baselineLabel: React.ReactNode
+    showMarker: boolean
+    theme: SegmentTheme
+}
+
+/**
+ * Internal: one vertical pill column (the Figma "Segment Indicator"). Not
+ * exported — the ergonomic public unit is the chart driven by `data`. The
+ * `segmentIndicator/*` token names are mirrored here so design ↔ code token
+ * alignment is preserved.
+ */
+function SegmentBar({
+    segment,
+    barHeightPx,
+    baselineHeightPx,
+    baselineLabel,
+    showMarker,
+    theme,
+}: SegmentBarProps) {
+    const { barWidth, pillRadius, gap, currentColor, baselineColor, lineColor, lineSize, labelStyle } =
+        theme
+
+    const fillColor = segment.color ?? currentColor
+    const overlayColor = segment.baselineColor ?? baselineColor
+    const showValueLabel = isShown(segment.valueLabel)
+
+    const hasBaseline = baselineHeightPx !== null && baselineHeightPx > 0
+    const overlayHeight = hasBaseline ? Math.min(baselineHeightPx as number, barHeightPx) : 0
+    const overlayRadius = Math.min(pillRadius, barWidth / 2, overlayHeight / 2)
+
+    return (
+        <View
+            style={{ flex: 1, alignItems: 'center', justifyContent: 'flex-end', gap }}
+            accessibilityLabel={segment.accessibilityLabel}
+        >
+            {showValueLabel ? (
+                <Text numberOfLines={1} style={labelStyle}>
+                    {segment.valueLabel}
+                </Text>
+            ) : null}
+
+            <View
+                style={{
+                    width: barWidth,
+                    height: Math.max(barHeightPx, 1),
+                    borderRadius: pillRadius,
+                    backgroundColor: fillColor,
+                    position: 'relative',
+                }}
+            >
+                {hasBaseline ? (
+                    <>
+                        <View
+                            style={{
+                                position: 'absolute',
+                                left: 0,
+                                right: 0,
+                                bottom: 0,
+                                height: overlayHeight,
+                                backgroundColor: overlayColor,
+                                borderBottomLeftRadius: overlayRadius,
+                                borderBottomRightRadius: overlayRadius,
+                            }}
+                        />
+                        {showMarker ? (
+                            <View
+                                style={{
+                                    position: 'absolute',
+                                    left: 0,
+                                    bottom: overlayHeight,
+                                    height: 0,
+                                    flexDirection: 'row',
+                                    alignItems: 'center',
+                                }}
+                                pointerEvents="none"
+                            >
+                                <Svg width={barWidth} height={Math.max(lineSize, 1)}>
+                                    <Line
+                                        x1={0}
+                                        y1={Math.max(lineSize, 1) / 2}
+                                        x2={barWidth}
+                                        y2={Math.max(lineSize, 1) / 2}
+                                        stroke={lineColor}
+                                        strokeWidth={lineSize}
+                                        strokeDasharray="2 2"
+                                    />
+                                </Svg>
+                                {isShown(baselineLabel) ? (
+                                    <Text numberOfLines={1} style={[labelStyle, { marginLeft: 6 }]}>
+                                        {baselineLabel}
+                                    </Text>
+                                ) : null}
+                            </View>
+                        ) : null}
+                    </>
+                ) : null}
+            </View>
+
+            <Text numberOfLines={1} style={labelStyle}>
+                {segment.label}
+            </Text>
+        </View>
+    )
+}
+
+/**
+ * `AllocationComparisonChart` plots a row of vertical pill bars that compare a
+ * **current** reading (each bar's height) against an optional **recommended**
+ * baseline (a filled overlay drawn from the bottom up, marked with a dashed
+ * line). Every bar and baseline shares a single scale, so heights are directly
+ * comparable across segments — no axes required.
+ *
+ * The chart is driven entirely by the `data` array: each entry pairs a
+ * `value`, an optional `baseline` and its `label`, so a bar can never drift
+ * out of sync with its caption or its baseline marker.
+ *
+ * Colors, fonts, spacing and the pill radius resolve from the Figma
+ * `segmentIndicator/*`, `metricLegendItem/*` and `allocationComparisonChart/*`
+ * tokens via the `modes` prop.
+ *
+ * @component
+ */
+function AllocationComparisonChart({
+    data = DEFAULT_DATA,
+    max,
+    height = 154,
+    barWidth,
+    showLegend = true,
+    valueLegendLabel = 'Current',
+    baselineLegendLabel = 'Recommended',
+    formatValue = (value: number) => `${value}%`,
+    modes: propModes = EMPTY_MODES,
+    style,
+    chartStyle,
+    legendStyle,
+    accessibilityLabel,
+}: AllocationComparisonChartProps) {
+    const { modes: globalModes } = useTokens()
+    const modes = React.useMemo(
+        () => ({ ...globalModes, ...propModes }),
+        [globalModes, propModes]
+    )
+
+    const trackWidth = toNumber(getVariableByName('segmentIndicator/track/width', modes), 28)
+    const resolvedBarWidth = barWidth ?? trackWidth
+    const radiusToken = toNumber(getVariableByName('segmentIndicator/indicator/radius', modes), 99999)
+    const pillRadius = Math.min(radiusToken, resolvedBarWidth / 2)
+    const gap = toNumber(getVariableByName('segmentIndicator/gap', modes), 4)
+    const chartGap = toNumber(getVariableByName('allocationComparisonChart/gap', modes), 8)
+
+    const currentColor =
+        (getVariableByName('segmentIndicator/indicator/background', modes) as string | null) ??
+        '#5d00b5'
+    const baselineColor =
+        (getVariableByName('segmentIndicator/indicator/foreground', modes) as string | null) ??
+        '#b84fbd'
+    const lineColor =
+        (getVariableByName('segmentIndicator/indicator/line/color', modes) as string | null) ??
+        '#ffffff'
+    const lineSize = toNumber(getVariableByName('segmentIndicator/indicator/line/size', modes), 1)
+
+    const foreground =
+        (getVariableByName('segmentIndicator/foreground', modes) as string | null) ?? '#0c0d10'
+    const fontFamily =
+        (getVariableByName('segmentIndicator/fontFamily', modes) as string | null) ?? 'JioType Var'
+    const fontSize = toNumber(getVariableByName('segmentIndicator/fontSize', modes), 12)
+    const lineHeight = toNumber(getVariableByName('segmentIndicator/lineHeight', modes), 12)
+    const fontWeight = toFontWeight(getVariableByName('segmentIndicator/fontWeight', modes), '400')
+
+    const labelStyle: TextStyle = {
+        color: foreground,
+        fontFamily,
+        fontSize,
+        lineHeight,
+        fontWeight,
+        textAlign: 'center',
+    }
+
+    const computedMax =
+        max ??
+        data.reduce(
+            (acc, seg) => Math.max(acc, seg.value, seg.baseline ?? 0),
+            0
+        )
+    const safeMax = computedMax > 0 ? computedMax : 1
+
+    const firstBaselineIndex = data.findIndex(
+        (seg) => typeof seg.baseline === 'number'
+    )
+    const hasAnyBaseline = firstBaselineIndex !== -1
+
+    const theme: SegmentTheme = {
+        barWidth: resolvedBarWidth,
+        pillRadius,
+        gap,
+        currentColor,
+        baselineColor,
+        lineColor,
+        lineSize,
+        labelStyle,
+    }
+
+    const defaultAccessibilityLabel =
+        accessibilityLabel ??
+        `Allocation comparison of ${data.length} segment${data.length === 1 ? '' : 's'}: ` +
+            data
+                .map((seg) => {
+                    const label = typeof seg.label === 'string' ? seg.label : 'segment'
+                    const base =
+                        typeof seg.baseline === 'number'
+                            ? `, recommended ${seg.baseline}`
+                            : ''
+                    return `${label} ${seg.value}${base}`
+                })
+                .join('; ')
+
+    return (
+        <View style={[{ width: '100%' }, style]} accessibilityLabel={defaultAccessibilityLabel}>
+            {showLegend ? (
+                <View
+                    style={[
+                        { flexDirection: 'row', alignItems: 'center', gap: 8, marginBottom: chartGap },
+                        legendStyle,
+                    ]}
+                >
+                    <MetricLegendItem
+                        label={valueLegendLabel}
+                        indicatorColor={currentColor}
+                        modes={modes}
+                        style={{ flexGrow: 0, flexShrink: 1 }}
+                    />
+                    {hasAnyBaseline ? (
+                        <MetricLegendItem
+                            label={baselineLegendLabel}
+                            indicatorColor={baselineColor}
+                            modes={modes}
+                            style={{ flexGrow: 0, flexShrink: 1 }}
+                        />
+                    ) : null}
+                </View>
+            ) : null}
+
+            <View
+                accessibilityRole="image"
+                style={[
+                    { flexDirection: 'row', alignItems: 'flex-end', gap: 8, width: '100%' },
+                    chartStyle,
+                ]}
+            >
+                {data.map((segment, index) => {
+                    const ratio = Math.max(0, Math.min(1, segment.value / safeMax))
+                    const barHeightPx = Math.max(0, height * ratio)
+                    const baselineHeightPx =
+                        typeof segment.baseline === 'number'
+                            ? Math.max(0, Math.min(1, segment.baseline / safeMax)) * height
+                            : null
+                    const baselineLabel =
+                        segment.baselineLabel === undefined
+                            ? typeof segment.baseline === 'number'
+                                ? formatValue(segment.baseline)
+                                : undefined
+                            : segment.baselineLabel
+                    const resolvedSegment: AllocationSegment = {
+                        ...segment,
+                        valueLabel:
+                            segment.valueLabel === undefined
+                                ? formatValue(segment.value)
+                                : segment.valueLabel,
+                    }
+                    const showMarker =
+                        segment.showMarker ?? index === firstBaselineIndex
+
+                    return (
+                        <SegmentBar
+                            key={segment.key ?? `segment-${index}`}
+                            segment={resolvedSegment}
+                            barHeightPx={barHeightPx}
+                            baselineHeightPx={baselineHeightPx}
+                            baselineLabel={baselineLabel}
+                            showMarker={showMarker}
+                            theme={theme}
+                        />
+                    )
+                })}
+            </View>
+        </View>
+    )
+}
+
+export default AllocationComparisonChart

package/src/components/AppBar/AppBar.tsx

@@ -194,20 +194,31 @@ export default function AppBar({
     justifyContent: hasInFlowMiddle ? 'flex-start' : 'space-between',
   }
 
-  // Absolutely-centered middle box for SubPage, mirroring the Figma geometry.
-  // `left/top: 50%` + a negative translate keeps it centered regardless of the
-  // bar width, while the fixed width clips overly-wide content (overflow:
-  // hidden) instead of letting it bleed under the leading/actions slots.
-  const subPageMiddleStyle: ViewStyle = {
+  // Absolutely-positioned overlay for the SubPage middle slot. Instead of
+  // centering a fixed-height box with `top/left: 50%` + transform (which on
+  // Android resolves the percentage against an intermediate, content-driven
+  // parent height and lands a few px too high), the overlay STRETCHES to fill
+  // the whole bar (`top/bottom/left/right: 0`) and centers its content with
+  // flexbox. This uses the exact same full-height vertical reference as the
+  // leading/actions row (`alignItems: 'center'`), so the middle content always
+  // sits on the same line as the back arrow and end slot on every platform.
+  const subPageMiddleOverlayStyle: ViewStyle = {
     position: 'absolute',
-    top: '50%',
-    left: '50%',
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+  }
+
+  // Fixed-width clipping box (mirrors the Figma "slot wrap" geometry): keeps the
+  // middle content from bleeding under the leading/actions slots while staying
+  // centered within the overlay above.
+  const subPageMiddleBoxStyle: ViewStyle = {
     width: middleSlotWidth,
     height: SUBPAGE_MIDDLE_HEIGHT,
-    transform: [
-      { translateX: -middleSlotWidth / 2 },
-      { translateY: -SUBPAGE_MIDDLE_HEIGHT / 2 },
-    ],
     flexDirection: 'row',
     alignItems: 'center',
     justifyContent: 'center',
@@ -260,19 +271,21 @@ export default function AppBar({
        * so its content fills / shrinks within the fixed-width box.
        */}
       {isSub && processedMiddle && (
-        <View style={subPageMiddleStyle} pointerEvents="box-none">
-          <View
-            style={{
-              flex: 1,
-              minWidth: 1,
-              height: '100%',
-              flexDirection: 'row',
-              alignItems: 'center',
-              justifyContent: 'center',
-            }}
-            pointerEvents="box-none"
-          >
-            {processedMiddle}
+        <View style={subPageMiddleOverlayStyle} pointerEvents="box-none">
+          <View style={subPageMiddleBoxStyle} pointerEvents="box-none">
+            <View
+              style={{
+                flex: 1,
+                minWidth: 1,
+                height: '100%',
+                flexDirection: 'row',
+                alignItems: 'center',
+                justifyContent: 'center',
+              }}
+              pointerEvents="box-none"
+            >
+              {processedMiddle}
+            </View>
           </View>
         </View>
       )}