@titan-design/react-ui 0.2.6 → 0.2.7

package/src/components/custom/Gauge/Gauge.test.tsx

@@ -0,0 +1,71 @@
+import { describe, it, expect } from 'vitest'
+import { render, screen } from '@testing-library/react'
+import { axe } from 'jest-axe'
+import { Gauge } from './Gauge'
+
+describe('Gauge', () => {
+  it('renders the arc as a fixed set of segments', () => {
+    render(<Gauge value={50} />)
+    expect(screen.getAllByTestId('gauge-segment')).toHaveLength(40)
+  })
+
+  it('renders the value, unit, and label', () => {
+    render(<Gauge value={82} unit="%" label="Health" />)
+    expect(screen.getByTestId('gauge-value')).toHaveTextContent('82')
+    expect(screen.getByTestId('gauge-label')).toHaveTextContent('Health')
+    expect(screen.getByText('%')).toBeInTheDocument()
+  })
+
+  it('colors the value by the active status band', () => {
+    const { rerender } = render(<Gauge value={30} />)
+    expect(screen.getByTestId('gauge-value')).toHaveStyle({ color: '#D14343' })
+    rerender(<Gauge value={70} />)
+    expect(screen.getByTestId('gauge-value')).toHaveStyle({ color: '#FFB020' })
+    rerender(<Gauge value={90} />)
+    expect(screen.getByTestId('gauge-value')).toHaveStyle({ color: '#14B8A6' })
+  })
+
+  it('honors a single-color override over thresholds', () => {
+    render(<Gauge value={10} color="#5B9BD5" />)
+    expect(screen.getByTestId('gauge-value')).toHaveStyle({ color: '#5B9BD5' })
+  })
+
+  it('clamps an out-of-range value without crashing', () => {
+    render(<Gauge value={150} unit="%" />)
+    // Displayed value is verbatim; only the fill is clamped.
+    expect(screen.getByTestId('gauge-value')).toHaveTextContent('150')
+    expect(screen.getAllByTestId('gauge-segment')).toHaveLength(40)
+  })
+
+  it('supports an arbitrary min/max domain', () => {
+    render(<Gauge value={5} min={0} max={10} label="Score" />)
+    expect(screen.getByTestId('gauge-value')).toHaveTextContent('5')
+  })
+
+  it('respects custom thresholds', () => {
+    render(
+      <Gauge
+        value={45}
+        thresholds={[
+          { value: 0, color: '#14B8A6' },
+          { value: 50, color: '#D14343' },
+        ]}
+      />,
+    )
+    expect(screen.getByTestId('gauge-value')).toHaveStyle({ color: '#14B8A6' })
+  })
+
+  describe('accessibility', () => {
+    it('exposes an image role with a descriptive label', () => {
+      render(<Gauge value={82} unit="%" label="Health" />)
+      const gauge = screen.getByTestId('gauge')
+      expect(gauge).toHaveAttribute('role', 'img')
+      expect(gauge.getAttribute('aria-label')).toContain('Health: 82% of 100')
+    })
+
+    it('has no accessibility violations', async () => {
+      const { container } = render(<Gauge value={82} unit="%" label="Health" />)
+      expect(await axe(container)).toHaveNoViolations()
+    })
+  })
+})

package/src/components/custom/Gauge/Gauge.tsx

@@ -0,0 +1,167 @@
+import { View, Text, type ViewProps } from 'react-native'
+import { cn } from '../../../utils/cn'
+
+export interface GaugeThreshold {
+  /** Band start, in the gauge's value units. */
+  value: number
+  /** Color applied to filled segments at or above this band. */
+  color: string
+}
+
+export interface GaugeProps extends Omit<ViewProps, 'children'> {
+  /** Current value. Clamped to [min, max]. */
+  value: number
+  min?: number
+  max?: number
+  /** Diameter in px. */
+  size?: number
+  /** Caption under the big number. */
+  label?: string
+  /** Unit suffix beside the big number (e.g. "%"). */
+  unit?: string
+  /**
+   * Band coloring, ascending by `value`. A filled segment takes the color of
+   * the highest band whose `value` it reaches. Defaults to Titan status tokens
+   * (red < 60, amber < 80, green ≥ 80 on a 0–100 scale).
+   */
+  thresholds?: GaugeThreshold[]
+  /** Single-color override for filled segments (ignores `thresholds`). */
+  color?: string
+  className?: string
+}
+
+const STATUS_SUCCESS = '#14B8A6'
+const STATUS_WARNING = '#FFB020'
+const STATUS_ERROR = '#D14343'
+const TRACK = 'rgba(255,255,255,0.08)'
+
+/** Titan status-token bands for a 0–100 score. */
+const DEFAULT_THRESHOLDS: GaugeThreshold[] = [
+  { value: 0, color: STATUS_ERROR },
+  { value: 60, color: STATUS_WARNING },
+  { value: 80, color: STATUS_SUCCESS },
+]
+
+const ARC_START = 135
+const ARC_SWEEP = 270
+const SEGMENTS = 40
+
+function clamp01(n: number): number {
+  if (Number.isNaN(n)) return 0
+  return Math.max(0, Math.min(1, n))
+}
+
+function formatValue(v: number): string {
+  return Number.isInteger(v) ? `${v}` : v.toFixed(1)
+}
+
+/** Color of the highest band whose start value the fraction reaches. */
+function bandColor(fraction: number, bands: GaugeThreshold[], min: number, max: number): string {
+  const value = min + fraction * (max - min)
+  const sorted = [...bands].sort((a, b) => a.value - b.value)
+  let color = sorted[0]?.color ?? STATUS_SUCCESS
+  for (const band of sorted) {
+    if (value >= band.value) color = band.color
+  }
+  return color
+}
+
+interface Tick {
+  key: number
+  left: number
+  top: number
+  rotate: string
+  color: string
+}
+
+/** Position + color each radial segment of the arc. */
+function buildTicks(fill: number, size: number, activeColor: (f: number) => string): Tick[] {
+  const center = size / 2
+  const radius = center - size * 0.08
+  return Array.from({ length: SEGMENTS }, (_, i) => {
+    const fraction = (i + 0.5) / SEGMENTS
+    const deg = ARC_START + fraction * ARC_SWEEP
+    const rad = (deg * Math.PI) / 180
+    return {
+      key: i,
+      left: center + radius * Math.cos(rad),
+      top: center + radius * Math.sin(rad),
+      rotate: `${deg - 90}deg`,
+      color: fraction <= fill ? activeColor(fraction) : TRACK,
+    }
+  })
+}
+
+/**
+ * SVG-free radial gauge (absolutely-positioned segment Views), matching the
+ * codebase's chart convention so it renders identically on web and native. The
+ * 270° arc fills with band colors as the value rises; the center reuses the
+ * Metric visual language (large bold value + unit + caption). Ideal for a 0–100
+ * health / quality score.
+ */
+export function Gauge({
+  value,
+  min = 0,
+  max = 100,
+  size = 160,
+  label,
+  unit,
+  thresholds = DEFAULT_THRESHOLDS,
+  color,
+  className,
+  ...props
+}: GaugeProps) {
+  const span = max - min || 1
+  const fill = clamp01((value - min) / span)
+  const activeColor = (f: number) => color ?? bandColor(f, thresholds, min, max)
+  const ticks = buildTicks(fill, size, activeColor)
+  const displayColor = color ?? bandColor(fill, thresholds, min, max)
+  const tickLength = size * 0.11
+  const tickThickness = Math.max(2, (size * 0.9) / SEGMENTS)
+
+  const ariaLabel = `${label ? `${label}: ` : ''}${formatValue(value)}${unit ?? ''} of ${formatValue(max)}`
+
+  return (
+    <View
+      className={cn('relative', className)}
+      style={{ width: size, height: size }}
+      accessibilityRole="image"
+      accessibilityLabel={ariaLabel}
+      testID="gauge"
+      {...props}
+    >
+      {ticks.map((t) => (
+        <View
+          key={t.key}
+          accessibilityElementsHidden
+          testID="gauge-segment"
+          style={{
+            position: 'absolute',
+            left: t.left - tickThickness / 2,
+            top: t.top - tickLength / 2,
+            width: tickThickness,
+            height: tickLength,
+            borderRadius: tickThickness / 2,
+            backgroundColor: t.color,
+            transform: [{ rotate: t.rotate }],
+          }}
+        />
+      ))}
+
+      {/* Center readout — Metric visual language. */}
+      <View style={{ position: 'absolute', top: 0, left: 0, width: size, height: size }} className="items-center justify-center">
+        <View className="flex-row items-baseline gap-0.5">
+          <Text testID="gauge-value" className="text-3xl font-bold" style={{ color: displayColor }}>
+            {formatValue(value)}
+          </Text>
+          {unit && <Text className="text-sm text-text-tertiary">{unit}</Text>}
+        </View>
+        {label && (
+          <Text testID="gauge-label" className="text-xs text-text-secondary mt-1">
+            {label}
+          </Text>
+        )}
+      </View>
+    </View>
+  )
+}

package/src/components/custom/Gauge/index.ts

@@ -0,0 +1,2 @@
+export { Gauge } from './Gauge'
+export type { GaugeProps, GaugeThreshold } from './Gauge'

package/src/components/custom/Scatter/Scatter.stories.tsx

@@ -0,0 +1,85 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import { Scatter, type ScatterDatum } from './Scatter'
+
+const meta: Meta<typeof Scatter> = {
+  title: 'Custom/Scatter',
+  component: Scatter,
+  tags: ['autodocs'],
+  argTypes: {
+    width: { control: { type: 'range', min: 240, max: 800, step: 20 } },
+    height: { control: { type: 'range', min: 180, max: 600, step: 20 } },
+    diagonal: { control: 'boolean' },
+  },
+}
+export default meta
+type Story = StoryObj<typeof Scatter>
+
+/** Modules on the instability × abstractness "main sequence". */
+const mainSequence: ScatterDatum[] = [
+  { id: 'core', x: 0.08, y: 0.85, r: 10, color: '#14B8A6', label: 'core' },
+  { id: 'domain', x: 0.22, y: 0.7, r: 8, color: '#14B8A6', label: 'domain' },
+  { id: 'services', x: 0.45, y: 0.4, r: 12, color: '#5B9BD5', label: 'services' },
+  { id: 'api', x: 0.6, y: 0.35, r: 7, color: '#5B9BD5', label: 'api' },
+  { id: 'cli', x: 0.9, y: 0.08, r: 9, color: '#F4A736', label: 'cli' },
+  { id: 'utils', x: 0.85, y: 0.75, r: 6, color: '#F83030', label: 'utils (pain?)' },
+]
+
+export const Default: Story = {
+  args: {
+    data: mainSequence,
+    width: 480,
+    height: 340,
+    diagonal: true,
+    axis: { xLabel: 'Instability (I)', yLabel: 'Abstractness (A)', xMin: 0, xMax: 1, yMin: 0, yMax: 1 },
+  },
+}
+
+export const NoDiagonal: Story = {
+  args: {
+    data: mainSequence,
+    width: 480,
+    height: 340,
+    axis: { xLabel: 'Instability (I)', yLabel: 'Abstractness (A)', xMin: 0, xMax: 1, yMin: 0, yMax: 1 },
+  },
+}
+
+export const Selected: Story = {
+  args: {
+    data: mainSequence,
+    width: 480,
+    height: 340,
+    diagonal: true,
+    selectedId: 'utils',
+    axis: { xLabel: 'Instability (I)', yLabel: 'Abstractness (A)', xMin: 0, xMax: 1, yMin: 0, yMax: 1 },
+  },
+}
+
+/** Auto-domain from a single point — the frame still renders cleanly. */
+export const SinglePoint: Story = {
+  args: {
+    data: [{ id: 'only', x: 0.5, y: 0.5, r: 10, label: 'only module' }],
+    width: 400,
+    height: 300,
+    axis: { xLabel: 'I', yLabel: 'A' },
+  },
+}
+
+/** An outlier far outside the main cluster, kept legible by an explicit domain. */
+export const Outlier: Story = {
+  args: {
+    data: [...mainSequence, { id: 'legacy', x: 0.98, y: 0.98, r: 16, color: '#F83030', label: 'legacy.ts' }],
+    width: 480,
+    height: 340,
+    diagonal: true,
+    axis: { xLabel: 'Instability (I)', yLabel: 'Abstractness (A)', xMin: 0, xMax: 1, yMin: 0, yMax: 1 },
+  },
+}
+
+export const Empty: Story = {
+  args: {
+    data: [],
+    width: 400,
+    height: 300,
+    axis: { xLabel: 'Instability (I)', yLabel: 'Abstractness (A)', xMin: 0, xMax: 1, yMin: 0, yMax: 1 },
+  },
+}

package/src/components/custom/Scatter/Scatter.test.tsx

@@ -0,0 +1,96 @@
+import { describe, it, expect, vi } from 'vitest'
+import { render, screen, fireEvent } from '@testing-library/react'
+import { axe } from 'jest-axe'
+import { Scatter, type ScatterDatum } from './Scatter'
+
+const data: ScatterDatum[] = [
+  { id: 'a', x: 0.1, y: 0.9, label: 'core' },
+  { id: 'b', x: 0.5, y: 0.5, label: 'mid' },
+  { id: 'c', x: 0.9, y: 0.1, label: 'leaf' },
+]
+
+const base = { data, width: 320, height: 240 }
+
+describe('Scatter', () => {
+  it('renders one point per datum', () => {
+    render(<Scatter {...base} />)
+    expect(screen.getByTestId('scatter-point-a')).toBeInTheDocument()
+    expect(screen.getByTestId('scatter-point-b')).toBeInTheDocument()
+    expect(screen.getByTestId('scatter-point-c')).toBeInTheDocument()
+  })
+
+  it('renders gridlines on both axes', () => {
+    render(<Scatter {...base} />)
+    expect(screen.getAllByTestId('scatter-gridline-x').length).toBeGreaterThanOrEqual(2)
+    expect(screen.getAllByTestId('scatter-gridline-y').length).toBeGreaterThanOrEqual(2)
+  })
+
+  it('fires onPress with the point id', () => {
+    const onPress = vi.fn()
+    render(<Scatter {...base} onPress={onPress} />)
+    fireEvent.click(screen.getByTestId('scatter-point-b'))
+    expect(onPress).toHaveBeenCalledWith('b')
+  })
+
+  it('draws the main-sequence diagonal only when requested', () => {
+    const { rerender } = render(<Scatter {...base} />)
+    expect(screen.queryByTestId('scatter-diagonal')).not.toBeInTheDocument()
+    rerender(<Scatter {...base} diagonal />)
+    expect(screen.getByTestId('scatter-diagonal')).toBeInTheDocument()
+  })
+
+  it('renders axis labels when provided', () => {
+    render(<Scatter {...base} axis={{ xLabel: 'Instability', yLabel: 'Abstractness' }} />)
+    expect(screen.getByTestId('scatter-x-label')).toHaveTextContent('Instability')
+    expect(screen.getByTestId('scatter-y-label')).toHaveTextContent('Abstractness')
+  })
+
+  it('labels a point by its label, falling back to id', () => {
+    render(<Scatter data={[{ id: 'solo', x: 0.2, y: 0.4 }]} width={200} height={200} />)
+    expect(screen.getByLabelText('solo')).toBeInTheDocument()
+  })
+
+  it('renders a single point without crashing', () => {
+    render(<Scatter data={[{ id: 'one', x: 5, y: 5 }]} width={200} height={200} />)
+    expect(screen.getByTestId('scatter-point-one')).toBeInTheDocument()
+  })
+
+  it('renders an empty plot frame with no points', () => {
+    render(<Scatter data={[]} width={200} height={200} />)
+    expect(screen.getByTestId('scatter-canvas')).toBeInTheDocument()
+    expect(screen.queryByTestId('scatter-points')?.childNodes.length ?? 0).toBe(0)
+  })
+
+  it('places an outlier inside the plot when domains are overridden', () => {
+    render(
+      <Scatter
+        data={[{ id: 'big', x: 999, y: 999 }]}
+        width={200}
+        height={200}
+        axis={{ xMin: 0, xMax: 1000, yMin: 0, yMax: 1000 }}
+      />,
+    )
+    expect(screen.getByTestId('scatter-point-big')).toBeInTheDocument()
+  })
+
+  describe('accessibility', () => {
+    it('labels the canvas as an image', () => {
+      render(<Scatter {...base} axis={{ xLabel: 'I', yLabel: 'A' }} />)
+      const canvas = screen.getByTestId('scatter-canvas')
+      expect(canvas).toHaveAttribute('role', 'img')
+      expect(canvas.getAttribute('aria-label')).toContain('3 points')
+    })
+
+    it('has no accessibility violations', async () => {
+      const { container } = render(
+        <Scatter {...base} diagonal axis={{ xLabel: 'I', yLabel: 'A' }} selectedId="b" />,
+      )
+      expect(await axe(container)).toHaveNoViolations()
+    })
+
+    it('has no accessibility violations when empty', async () => {
+      const { container } = render(<Scatter data={[]} width={200} height={200} />)
+      expect(await axe(container)).toHaveNoViolations()
+    })
+  })
+})

package/src/components/custom/Scatter/Scatter.tsx

@@ -0,0 +1,260 @@
+import { View, Text, Pressable, type ViewProps } from 'react-native'
+import { cn } from '../../../utils/cn'
+
+export interface ScatterDatum {
+  /** Stable identity — returned by onPress and used as the React key. */
+  id: string
+  /** Horizontal position in data space. */
+  x: number
+  /** Vertical position in data space. */
+  y: number
+  /** Bubble radius in px. Falls back to a fixed default when omitted. */
+  r?: number
+  /** Bubble fill color. Falls back to a built-in categorical palette by index. */
+  color?: string
+  /** Optional label shown for large or selected points. */
+  label?: string
+}
+
+export interface ScatterAxis {
+  xLabel?: string
+  yLabel?: string
+  /** Domain overrides. Any omitted bound is derived from the data. */
+  xMin?: number
+  xMax?: number
+  yMin?: number
+  yMax?: number
+}
+
+export interface ScatterProps extends Omit<ViewProps, 'children'> {
+  data: ScatterDatum[]
+  /** Layout box. Required — the plot fills exactly this area. */
+  width: number
+  height: number
+  /** Axis labels and optional domain overrides. */
+  axis?: ScatterAxis
+  /**
+   * Draw the y = 1 − x "main sequence" reference line (NDepend idiom, where
+   * distance from the diagonal measures the zone of pain / zone of uselessness).
+   */
+  diagonal?: boolean
+  /** Fires with a point's id on press. */
+  onPress?: (id: string) => void
+  /** Draws a highlight ring on the matching point. */
+  selectedId?: string
+  className?: string
+}
+
+/** Titan categorical fallback palette (data-1..data-8). */
+const PALETTE = [
+  '#5B9BD5', '#14B8A6', '#F4A736', '#F83030',
+  '#823CA0', '#D4A520', '#406D87', '#43C6B7',
+]
+
+const GRID_LINE = 'rgba(255,255,255,0.07)'
+const AXIS_LINE = 'rgba(255,255,255,0.18)'
+const DIAGONAL_LINE = 'rgba(255,255,255,0.28)'
+const DEFAULT_R = 6
+
+const PLOT_LEFT = 40
+const PLOT_RIGHT = 12
+const PLOT_TOP = 12
+const PLOT_BOTTOM = 34
+const TICK_COUNT = 5
+
+interface Domain {
+  min: number
+  max: number
+}
+
+/** Derive a padded [min, max] from values, honoring explicit overrides. */
+function domainOf(values: number[], min?: number, max?: number): Domain {
+  const lo = min ?? (values.length ? Math.min(...values) : 0)
+  const hi = max ?? (values.length ? Math.max(...values) : 1)
+  if (hi > lo) return { min: lo, max: hi }
+  const pad = Math.abs(hi) * 0.1 || 0.5
+  return { min: lo - pad, max: hi + pad }
+}
+
+/** Evenly spaced tick values across a domain. */
+function ticksOf(d: Domain, count: number): number[] {
+  return Array.from({ length: count }, (_, i) => d.min + ((d.max - d.min) * i) / (count - 1))
+}
+
+function formatTick(v: number): string {
+  if (Number.isInteger(v)) return `${v}`
+  return v.toFixed(Math.abs(v) < 1 ? 2 : 1)
+}
+
+/** A single straight segment drawn as one rotated View (SVG-free). */
+function LineSegment({
+  x1, y1, x2, y2, color, testID,
+}: { x1: number; y1: number; x2: number; y2: number; color: string; testID: string }) {
+  const dx = x2 - x1
+  const dy = y2 - y1
+  const length = Math.sqrt(dx * dx + dy * dy)
+  const angle = Math.atan2(dy, dx) * (180 / Math.PI)
+  return (
+    <View
+      testID={testID}
+      accessibilityElementsHidden
+      style={{
+        position: 'absolute',
+        left: x1,
+        top: y1,
+        width: length,
+        height: 0,
+        borderTopWidth: 1,
+        borderStyle: 'dashed',
+        borderTopColor: color,
+        transformOrigin: '0 0',
+        transform: [{ rotate: `${angle}deg` }],
+      }}
+    />
+  )
+}
+
+/**
+ * SVG-free scatter / bubble plot (absolutely-positioned Views), matching the
+ * codebase's chart convention so it renders identically on web and native. Used
+ * for "main-sequence" plots (instability × abstractness) via the `diagonal`
+ * reference line, or any two metrics. Positions and bubble sizes are computed
+ * from the data; color and labels are caller-supplied.
+ */
+export function Scatter({
+  data,
+  width,
+  height,
+  axis = {},
+  diagonal = false,
+  onPress,
+  selectedId,
+  className,
+  ...props
+}: ScatterProps) {
+  const innerW = Math.max(1, width - PLOT_LEFT - PLOT_RIGHT)
+  const innerH = Math.max(1, height - PLOT_TOP - PLOT_BOTTOM)
+  const xd = domainOf(data.map((d) => d.x), axis.xMin, axis.xMax)
+  const yd = domainOf(data.map((d) => d.y), axis.yMin, axis.yMax)
+
+  const toX = (x: number) => PLOT_LEFT + ((x - xd.min) / (xd.max - xd.min)) * innerW
+  const toY = (y: number) => PLOT_TOP + (1 - (y - yd.min) / (yd.max - yd.min)) * innerH
+
+  const points = data.map((d, i) => ({
+    datum: d,
+    cx: toX(d.x),
+    cy: toY(d.y),
+    radius: d.r ?? DEFAULT_R,
+    color: d.color ?? PALETTE[i % PALETTE.length],
+  }))
+
+  const ariaLabel = `Scatter plot of ${axis.xLabel ?? 'x'} versus ${axis.yLabel ?? 'y'}, ${data.length} point${data.length === 1 ? '' : 's'}`
+
+  return (
+    <View className={cn('relative', className)} style={{ width, height }} {...props}>
+      {/* Non-interactive labelled canvas: grid, axes, ticks, diagonal. */}
+      <View
+        accessibilityRole="image"
+        accessibilityLabel={ariaLabel}
+        testID="scatter-canvas"
+        style={{ position: 'absolute', top: 0, left: 0, width, height, overflow: 'hidden' }}
+      >
+        {ticksOf(yd, TICK_COUNT).map((t, i) => {
+          const y = toY(t)
+          return (
+            <View
+              key={`y-${i}`}
+              accessibilityElementsHidden
+              testID="scatter-gridline-y"
+              style={{ position: 'absolute', left: PLOT_LEFT, width: innerW, top: y, height: 1, backgroundColor: GRID_LINE }}
+            >
+              <Text className="text-[9px] text-text-tertiary" style={{ position: 'absolute', left: -PLOT_LEFT, top: -6, width: PLOT_LEFT - 6, textAlign: 'right' }}>
+                {formatTick(t)}
+              </Text>
+            </View>
+          )
+        })}
+        {ticksOf(xd, TICK_COUNT).map((t, i) => {
+          const x = toX(t)
+          return (
+            <View
+              key={`x-${i}`}
+              accessibilityElementsHidden
+              testID="scatter-gridline-x"
+              style={{ position: 'absolute', top: PLOT_TOP, height: innerH, left: x, width: 1, backgroundColor: GRID_LINE }}
+            >
+              <Text className="text-[9px] text-text-tertiary" style={{ position: 'absolute', top: innerH + 4, left: -16, width: 32, textAlign: 'center' }}>
+                {formatTick(t)}
+              </Text>
+            </View>
+          )
+        })}
+
+        {/* Axis frame (left + bottom). */}
+        <View accessibilityElementsHidden style={{ position: 'absolute', left: PLOT_LEFT, top: PLOT_TOP, width: 1, height: innerH, backgroundColor: AXIS_LINE }} />
+        <View accessibilityElementsHidden style={{ position: 'absolute', left: PLOT_LEFT, top: PLOT_TOP + innerH, width: innerW, height: 1, backgroundColor: AXIS_LINE }} />
+
+        {diagonal && (
+          <LineSegment
+            testID="scatter-diagonal"
+            color={DIAGONAL_LINE}
+            x1={toX(xd.min)}
+            y1={toY(1 - xd.min)}
+            x2={toX(xd.max)}
+            y2={toY(1 - xd.max)}
+          />
+        )}
+
+        {axis.xLabel && (
+          <Text testID="scatter-x-label" className="text-[10px] font-semibold text-text-secondary" style={{ position: 'absolute', left: PLOT_LEFT, width: innerW, bottom: 2, textAlign: 'center' }}>
+            {axis.xLabel}
+          </Text>
+        )}
+        {axis.yLabel && (
+          <Text testID="scatter-y-label" className="text-[10px] font-semibold text-text-secondary" style={{ position: 'absolute', left: -innerH / 2 + 6, top: PLOT_TOP + innerH / 2, width: innerH, textAlign: 'center', transformOrigin: '50% 50%', transform: [{ rotate: '-90deg' }] }}>
+            {axis.yLabel}
+          </Text>
+        )}
+      </View>
+
+      {/* Interactive point overlay (kept out of the image-role canvas). */}
+      <View style={{ position: 'absolute', top: 0, left: 0, width, height }} testID="scatter-points">
+        {points.map((p) => {
+          const selected = p.datum.id === selectedId
+          const showLabel = p.datum.label && (selected || p.radius >= 10)
+          return (
+            <Pressable
+              key={p.datum.id}
+              testID={`scatter-point-${p.datum.id}`}
+              accessibilityRole="button"
+              accessibilityLabel={p.datum.label ?? p.datum.id}
+              onPress={() => onPress?.(p.datum.id)}
+              style={{
+                position: 'absolute',
+                left: p.cx - p.radius,
+                top: p.cy - p.radius,
+                width: p.radius * 2,
+                height: p.radius * 2,
+                borderRadius: p.radius,
+                backgroundColor: p.color,
+                opacity: selected ? 1 : 0.82,
+                borderWidth: selected ? 2 : 0,
+                borderColor: '#ffffff',
+              }}
+            >
+              {showLabel && (
+                <Text
+                  numberOfLines={1}
+                  className="text-[9px] font-semibold text-text-primary"
+                  style={{ position: 'absolute', left: p.radius * 2 + 3, top: p.radius - 6, width: 80 }}
+                >
+                  {p.datum.label}
+                </Text>
+              )}
+            </Pressable>
+          )
+        })}
+      </View>
+    </View>
+  )
+}

package/src/components/custom/Scatter/index.ts

@@ -0,0 +1,2 @@
+export { Scatter } from './Scatter'
+export type { ScatterProps, ScatterDatum, ScatterAxis } from './Scatter'