@titan-design/react-ui 0.12.1 → 0.14.0

package/src/components/custom/Prose/MarkdownProse.tsx

@@ -0,0 +1,201 @@
+// Font mapping: font-heading=Space Grotesk, font-body=Nunito Sans (UI), font-sans=Inter (body)
+import { useMemo, type ReactNode } from 'react'
+import { Text, View } from 'react-native'
+import { cn } from '../../../utils/cn'
+import { Typography } from '../Typography'
+
+/** How a linked reference reads: brand for the domain's own ids, link for cross-references, muted for asides. */
+export type ProseLinkTone = 'brand' | 'link' | 'muted'
+
+/**
+ * A pattern the prose auto-links. Patterns must not carry the `g` flag or
+ * capture groups: the renderer combines them into one tokenizer.
+ */
+export interface ProseLinker {
+  /** Stable id, used in keys and test ids. */
+  id: string
+  pattern: RegExp
+  tone?: ProseLinkTone
+  /** Text to show for a match. Defaults to the match itself. */
+  label?: (ref: string) => string
+  /** When set the reference is pressable and exposes a link role. */
+  onPress?: (ref: string) => void
+}
+
+export type ProseBlockType = 'h1' | 'h2' | 'h3' | 'li' | 'p'
+
+export interface ProseBlock {
+  type: ProseBlockType
+  text: string
+}
+
+export interface MarkdownProseProps {
+  /** Markdown source. Headings, bullet lists, paragraphs, bold and code are understood. */
+  body: string
+  /** Reference patterns to auto-link, tried in order. */
+  linkers?: ProseLinker[]
+  className?: string
+  testID?: string
+}
+
+const BOLD = /\*\*[^*]+\*\*/
+const CODE = /`[^`]+`/
+
+/**
+ * Splits markdown into the block kinds this renderer understands. Consecutive
+ * text lines join into one paragraph; a blank line ends it. An indented line
+ * straight after a bullet continues that bullet. Deeper headings flatten to
+ * h3, since session prose never needs more than three levels.
+ */
+export function parseProseBlocks(body: string): ProseBlock[] {
+  const blocks: ProseBlock[] = []
+  let paragraph: string[] = []
+  const flush = () => {
+    if (paragraph.length) blocks.push({ type: 'p', text: paragraph.join(' ') })
+    paragraph = []
+  }
+  for (const raw of body.split('\n')) {
+    const line = raw.trim()
+    if (!line) {
+      flush()
+      continue
+    }
+    const heading = line.match(/^(#{1,6})\s+(.*)/)
+    if (heading) {
+      flush()
+      const level = Math.min(3, heading[1]!.length)
+      blocks.push({ type: `h${level}` as ProseBlockType, text: heading[2]! })
+      continue
+    }
+    const item = line.match(/^[-*]\s+(.*)/)
+    if (item) {
+      flush()
+      blocks.push({ type: 'li', text: item[1]! })
+      continue
+    }
+    // Lazy continuation: an indented line straight after a bullet belongs to it.
+    const last = blocks[blocks.length - 1]
+    if (last?.type === 'li' && paragraph.length === 0 && /^\s/.test(raw)) {
+      last.text = `${last.text} ${line}`
+      continue
+    }
+    paragraph.push(line)
+  }
+  flush()
+  return blocks
+}
+
+// One step denser than body2, with a 20px line so long logs stay readable at that size.
+const BODY_TEXT = 'text-xs leading-5 text-text-secondary'
+
+const TONE_CLASS: Record<ProseLinkTone, string> = {
+  brand: 'font-semibold text-brand-primary',
+  link: 'font-medium text-text-link',
+  muted: 'text-text-tertiary',
+}
+
+function anchored(pattern: RegExp): RegExp {
+  return new RegExp(`^(?:${pattern.source})$`)
+}
+
+/** One tokenizer for bold, code and every linker, so a span is classified exactly once. */
+function buildTokenizer(linkers: ProseLinker[]): RegExp {
+  const parts = [BOLD.source, CODE.source, ...linkers.map((l) => l.pattern.source)]
+  return new RegExp(`(${parts.join('|')})`, 'g')
+}
+
+function LinkedRef({ linker, value }: { linker: ProseLinker; value: string }) {
+  const label = linker.label ? linker.label(value) : value
+  const pressable = !!linker.onPress
+  return (
+    <Text
+      className={TONE_CLASS[linker.tone ?? 'link']}
+      onPress={pressable ? () => linker.onPress?.(value) : undefined}
+      accessibilityRole={pressable ? 'link' : undefined}
+      testID={`prose-ref-${linker.id}`}
+    >
+      {label}
+    </Text>
+  )
+}
+
+function renderInline(text: string, linkers: ProseLinker[], tokenizer: RegExp): ReactNode[] {
+  const anchoredLinkers = linkers.map((l) => ({ linker: l, test: anchored(l.pattern) }))
+  return text
+    .split(tokenizer)
+    .filter((piece) => piece !== '' && piece !== undefined)
+    .map((piece, i) => {
+      if (anchored(BOLD).test(piece)) {
+        return (
+          <Text key={i} className="font-semibold text-text-primary">
+            {piece.slice(2, -2)}
+          </Text>
+        )
+      }
+      if (anchored(CODE).test(piece)) {
+        return (
+          <Text key={i} className="font-mono text-text-primary">
+            {piece.slice(1, -1)}
+          </Text>
+        )
+      }
+      const hit = anchoredLinkers.find((l) => l.test.test(piece))
+      if (hit) return <LinkedRef key={i} linker={hit.linker} value={piece} />
+      return <Text key={i}>{piece}</Text>
+    })
+}
+
+function Block({ block, inline }: { block: ProseBlock; inline: (text: string) => ReactNode[] }) {
+  if (block.type === 'h1' || block.type === 'h2') {
+    return (
+      <Typography variant={block.type === 'h1' ? 'h5' : 'h6'} className="mt-1.5 text-text-primary">
+        {block.text}
+      </Typography>
+    )
+  }
+  if (block.type === 'h3') {
+    return (
+      <Typography variant="subtitle2" className="mt-1 font-bold text-text-primary">
+        {inline(block.text)}
+      </Typography>
+    )
+  }
+  if (block.type === 'li') {
+    return (
+      <View className="flex-row gap-2 pl-1">
+        <Text className="text-xs leading-5 text-brand-primary">•</Text>
+        <Typography variant="body2" className={cn('flex-1', BODY_TEXT)}>
+          {inline(block.text)}
+        </Typography>
+      </View>
+    )
+  }
+  return (
+    <Typography variant="body2" className={BODY_TEXT}>
+      {inline(block.text)}
+    </Typography>
+  )
+}
+
+/**
+ * MarkdownProse — renders a small, predictable markdown subset as themed prose
+ * and auto-links references the caller describes.
+ *
+ * It is deliberately not a full markdown engine: headings, bullet lists,
+ * paragraphs, bold and code cover the notes, briefs and session logs this
+ * system reads, and anything richer would need a design pass of its own.
+ * Composes {@link Typography}. Used by `SessionDetail` (session logs) and the
+ * initiative reader (brief and handoff prose).
+ */
+export function MarkdownProse({ body, linkers = [], className, testID }: MarkdownProseProps) {
+  const blocks = useMemo(() => parseProseBlocks(body), [body])
+  const tokenizer = useMemo(() => buildTokenizer(linkers), [linkers])
+  const inline = (text: string) => renderInline(text, linkers, tokenizer)
+  return (
+    <View className={cn('gap-2', className)} testID={testID}>
+      {blocks.map((block, i) => (
+        <Block key={i} block={block} inline={inline} />
+      ))}
+    </View>
+  )
+}

package/src/components/custom/Prose/README.md

@@ -0,0 +1,58 @@
+# `custom/Prose` — long-form text rendering
+
+One component. It exists because the ActiveWork readers display markdown written
+by humans and agents — briefs, session notes, open loops — and a `<Text>` per
+paragraph loses headings, bullets, emphasis and, critically, the domain
+references (`AW-124`, `#172`, a file path) that make that prose navigable.
+
+This README is the **index**: **composes ↓** and **used-by ↑**, so the tree
+navigates both ways. Counts come from
+[`src/arch/arch-graph.json`](../../../arch/arch-graph.json).
+
+## Dependency map
+
+| Member                          | Kind     | Composes ↓         | Used-by ↑                                                  |
+| ------------------------------- | -------- | ------------------ | ---------------------------------------------------------- |
+| `MarkdownProse`                 | molecule | `Typography`, `cn` | InitiativeBrief, OpenLoops, SessionDetail (all ActiveWork) |
+| `parseProseBlocks`              | pure fn  | —                  | `MarkdownProse`, and its own tests                         |
+| `ProseLinker` / `ProseLinkTone` | types    | —                  | every consumer that supplies reference patterns            |
+
+Four in-repo consumers, zero external — `keep-internal` in the arch graph. The
+parser is exported separately on purpose: block-splitting is the part worth
+testing directly, and it is testable without rendering.
+
+## The two halves
+
+**`parseProseBlocks(body)`** splits markdown into the five block kinds this
+renderer understands (`h1` `h2` `h3` `li` `p`). Consecutive text lines join into
+one paragraph and a blank line ends it; an indented line straight after a bullet
+continues that bullet; deeper headings flatten to `h3`, because session prose
+never needs more than three levels. It is pure, so it is unit-tested on its own.
+
+**`MarkdownProse`** renders those blocks and inline-links references. `linkers`
+is an ordered list of `{ id, pattern, tone, label, onPress }`; the renderer
+combines the patterns into one tokenizer, which is why **a `ProseLinker.pattern`
+must carry neither the `g` flag nor capture groups**. `tone` chooses how a
+reference reads: `brand` for the domain's own ids, `link` for cross-references,
+`muted` for asides. A linker with `onPress` becomes pressable and takes a link
+role; without one it is styled text, not an interactive element.
+
+## Reuse audit
+
+| Leaf                   | Should compose     | Status                                                                                                                                                                                    |
+| ---------------------- | ------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| Headings and body copy | `Typography`       | **Closed.** `h1`/`h2` → `h5`/`h6`, `h3` → `subtitle2`, paragraphs and bullets → `body2`.                                                                                                  |
+| Bold and code spans    | `Typography`       | **Open, deliberately.** Inline spans are raw `<Text>` with `font-semibold` / `font-mono`, because they nest inside a parent `<Text>` run where a `Typography` block would break the flow. |
+| Bullet glyph           | a shared list mark | **Open.** The `•` is drawn inline. One consumer family, so no primitive is justified yet — revisit at the second.                                                                         |
+| Colour                 | semantic tokens    | **Closed.** `text-text-primary` / `text-brand-primary` throughout; the family is in the token-pure eslint error block.                                                                    |
+| Class merging          | `cn()`             | **Closed.**                                                                                                                                                                               |
+
+## Watch list
+
+- **The tokenizer contract is unenforced.** A `linkers` entry with a `g` flag or a
+  capture group breaks reference splitting at runtime with no type error. If a
+  third consumer arrives, validate in `MarkdownProse` rather than in each caller.
+- **Markdown coverage is intentionally partial** — no tables, links, images,
+  blockquotes or nested lists. Widen it only against a real document that needs
+  it; the parser's value is that it is small enough to read.
+- **Zero external consumers.** Prop changes are cheap while that holds.

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

@@ -0,0 +1 @@
+export * from './MarkdownProse'

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

@@ -1,10 +1,13 @@
 import type { Meta, StoryObj } from '@storybook/react-vite'
 import { Scatter, type ScatterDatum } from './Scatter'
+import { getSemanticColors } from '../../../theme/tokens/semantic'
+
+const t = getSemanticColors('dark')
 
 const meta: Meta<typeof Scatter> = {
-  title: 'Components/DataViz/Scatter',
+  title: 'Custom/Charts/Scatter',
   component: Scatter,
-  tags: ['autodocs'],
+  tags: ['autodocs', 'status:candidate', '!status:review'],
   argTypes: {
     width: { control: { type: 'range', min: 240, max: 800, step: 20 } },
     height: { control: { type: 'range', min: 180, max: 600, step: 20 } },
@@ -16,12 +19,12 @@ 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?)' },
+  { id: 'core', x: 0.08, y: 0.85, r: 10, color: t['data-1'], label: 'core' },
+  { id: 'domain', x: 0.22, y: 0.7, r: 8, color: t['data-1'], label: 'domain' },
+  { id: 'services', x: 0.45, y: 0.4, r: 12, color: t['data-7'], label: 'services' },
+  { id: 'api', x: 0.6, y: 0.35, r: 7, color: t['data-7'], label: 'api' },
+  { id: 'cli', x: 0.9, y: 0.08, r: 9, color: t['data-6'], label: 'cli' },
+  { id: 'utils', x: 0.85, y: 0.75, r: 6, color: t['data-4'], label: 'utils (pain?)' },
 ]
 
 export const Default: Story = {
@@ -30,7 +33,14 @@ export const Default: Story = {
     width: 480,
     height: 340,
     diagonal: true,
-    axis: { xLabel: 'Instability (I)', yLabel: 'Abstractness (A)', xMin: 0, xMax: 1, yMin: 0, yMax: 1 },
+    axis: {
+      xLabel: 'Instability (I)',
+      yLabel: 'Abstractness (A)',
+      xMin: 0,
+      xMax: 1,
+      yMin: 0,
+      yMax: 1,
+    },
   },
 }
 
@@ -39,7 +49,14 @@ export const NoDiagonal: Story = {
     data: mainSequence,
     width: 480,
     height: 340,
-    axis: { xLabel: 'Instability (I)', yLabel: 'Abstractness (A)', xMin: 0, xMax: 1, yMin: 0, yMax: 1 },
+    axis: {
+      xLabel: 'Instability (I)',
+      yLabel: 'Abstractness (A)',
+      xMin: 0,
+      xMax: 1,
+      yMin: 0,
+      yMax: 1,
+    },
   },
 }
 
@@ -50,7 +67,14 @@ export const Selected: Story = {
     height: 340,
     diagonal: true,
     selectedId: 'utils',
-    axis: { xLabel: 'Instability (I)', yLabel: 'Abstractness (A)', xMin: 0, xMax: 1, yMin: 0, yMax: 1 },
+    axis: {
+      xLabel: 'Instability (I)',
+      yLabel: 'Abstractness (A)',
+      xMin: 0,
+      xMax: 1,
+      yMin: 0,
+      yMax: 1,
+    },
   },
 }
 
@@ -67,11 +91,21 @@ export const SinglePoint: Story = {
 /** 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' }],
+    data: [
+      ...mainSequence,
+      { id: 'legacy', x: 0.98, y: 0.98, r: 16, color: t['data-4'], label: 'legacy.ts' },
+    ],
     width: 480,
     height: 340,
     diagonal: true,
-    axis: { xLabel: 'Instability (I)', yLabel: 'Abstractness (A)', xMin: 0, xMax: 1, yMin: 0, yMax: 1 },
+    axis: {
+      xLabel: 'Instability (I)',
+      yLabel: 'Abstractness (A)',
+      xMin: 0,
+      xMax: 1,
+      yMin: 0,
+      yMax: 1,
+    },
   },
 }
 
@@ -80,6 +114,13 @@ export const Empty: Story = {
     data: [],
     width: 400,
     height: 300,
-    axis: { xLabel: 'Instability (I)', yLabel: 'Abstractness (A)', xMin: 0, xMax: 1, yMin: 0, yMax: 1 },
+    axis: {
+      xLabel: 'Instability (I)',
+      yLabel: 'Abstractness (A)',
+      xMin: 0,
+      xMax: 1,
+      yMin: 0,
+      yMax: 1,
+    },
   },
 }

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

@@ -68,7 +68,7 @@ describe('Scatter', () => {
         width={200}
         height={200}
         axis={{ xMin: 0, xMax: 1000, yMin: 0, yMax: 1000 }}
-      />,
+      />
     )
     expect(screen.getByTestId('scatter-point-big')).toBeInTheDocument()
   })
@@ -83,7 +83,7 @@ describe('Scatter', () => {
 
     it('has no accessibility violations', async () => {
       const { container } = render(
-        <Scatter {...base} diagonal axis={{ xLabel: 'I', yLabel: 'A' }} selectedId="b" />,
+        <Scatter {...base} diagonal axis={{ xLabel: 'I', yLabel: 'A' }} selectedId="b" />
       )
       expect(await axe(container)).toHaveNoViolations()
     })

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

@@ -1,6 +1,8 @@
 import { View, Text, Pressable, type ViewProps } from 'react-native'
 import { cn } from '../../../utils/cn'
 import { DATAVIZ_CATEGORICAL_PALETTE } from '../../../theme/extracted-colors-dataviz'
+import { primitiveColors } from '../../../theme/tokens/primitives'
+import { alpha } from '../../../utils/colors'
 
 export interface ScatterDatum {
   /** Stable identity — returned by onPress and used as the React key. */
@@ -49,9 +51,9 @@ export interface ScatterProps extends Omit<ViewProps, 'children'> {
 /** Titan categorical fallback palette (see extracted-colors-dataviz). */
 const PALETTE = DATAVIZ_CATEGORICAL_PALETTE
 
-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 GRID_LINE = alpha(primitiveColors.white, 0.07)
+const AXIS_LINE = alpha(primitiveColors.white, 0.18)
+const DIAGONAL_LINE = alpha(primitiveColors.white, 0.28)
 const DEFAULT_R = 6
 
 const PLOT_LEFT = 40
@@ -86,8 +88,20 @@ function formatTick(v: number): string {
 
 /** 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 }) {
+  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)
@@ -132,8 +146,16 @@ export function Scatter({
 }: 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 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
@@ -164,9 +186,25 @@ export function Scatter({
               key={`y-${i}`}
               accessibilityElementsHidden
               testID="scatter-gridline-y"
-              style={{ position: 'absolute', left: PLOT_LEFT, width: innerW, top: y, height: 1, backgroundColor: GRID_LINE }}
+              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' }}>
+              <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>
@@ -179,9 +217,25 @@ export function Scatter({
               key={`x-${i}`}
               accessibilityElementsHidden
               testID="scatter-gridline-x"
-              style={{ position: 'absolute', top: PLOT_TOP, height: innerH, left: x, width: 1, backgroundColor: GRID_LINE }}
+              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' }}>
+              <Text
+                className="text-[9px] text-text-tertiary"
+                style={{
+                  position: 'absolute',
+                  top: innerH + 4,
+                  left: -16,
+                  width: 32,
+                  textAlign: 'center',
+                }}
+              >
                 {formatTick(t)}
               </Text>
             </View>
@@ -189,8 +243,28 @@ export function Scatter({
         })}
 
         {/* 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 }} />
+        <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
@@ -204,19 +278,44 @@ export function Scatter({
         )}
 
         {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' }}>
+          <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' }] }}>
+          <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">
+      <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)
@@ -237,14 +336,19 @@ export function Scatter({
                 backgroundColor: p.color,
                 opacity: selected ? 1 : 0.82,
                 borderWidth: selected ? 2 : 0,
-                borderColor: '#ffffff',
+                borderColor: primitiveColors.white,
               }}
             >
               {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 }}
+                  style={{
+                    position: 'absolute',
+                    left: p.radius * 2 + 3,
+                    top: p.radius - 6,
+                    width: 80,
+                  }}
                 >
                   {p.datum.label}
                 </Text>