@titan-design/react-ui 0.2.5 → 0.2.7

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'

package/src/components/custom/Sidebar/Sidebar.tsx

@@ -64,7 +64,7 @@ export function Sidebar({
       <View
         style={{ width: currentWidth }}
         className={cn(
-          'h-full flex-col bg-surface-base border-r border-border-default transition-all duration-200',
+          'h-full flex-col bg-surface-base border-r border-border transition-all duration-200',
           className
         )}
         {...props}

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

@@ -0,0 +1,60 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import { Treemap, type TreemapDatum } from './Treemap'
+
+const meta: Meta<typeof Treemap> = {
+  title: 'Custom/Treemap',
+  component: Treemap,
+  tags: ['autodocs'],
+  argTypes: {
+    width: { control: { type: 'range', min: 200, max: 900, step: 20 } },
+    height: { control: { type: 'range', min: 120, max: 600, step: 20 } },
+    scale: { control: 'select', options: ['linear', 'sqrt', 'log'] },
+    maxTiles: { control: { type: 'range', min: 4, max: 80, step: 1 } },
+  },
+}
+export default meta
+type Story = StoryObj<typeof Treemap>
+
+const sample: TreemapDatum[] = [
+  { id: 'router', value: 5035, color: '#F83030', label: 'router.ts' },
+  { id: 'engine', value: 4378, color: '#F83030', label: 'engine.ts' },
+  { id: 'linker', value: 1695, color: '#F4A736', label: 'linker.ts' },
+  { id: 'validate', value: 1288, color: '#F4A736', label: 'validate.ts' },
+  { id: 'hook', value: 1050, color: '#F4A736', label: 'hook.ts' },
+  { id: 'update', value: 890, color: '#5B9BD5', label: 'update.ts' },
+  { id: 'pool', value: 504, color: '#5B9BD5', label: 'pool.ts' },
+  { id: 'log', value: 342, color: '#5B9BD5', label: 'log.ts' },
+]
+
+export const Default: Story = {
+  args: { data: sample, width: 560, height: 300, scale: 'sqrt' },
+}
+
+/** A single outlier under a linear scale swallows the canvas... */
+export const OutlierLinear: Story = {
+  args: {
+    data: [{ id: 'mega', value: 205422, color: '#F83030', label: 'mega.ts' }, ...sample],
+    width: 560,
+    height: 300,
+    scale: 'linear',
+  },
+}
+
+/** ...the same data with a sqrt scale keeps every tile legible. */
+export const OutlierSqrt: Story = {
+  args: {
+    data: [{ id: 'mega', value: 205422, color: '#F83030', label: 'mega.ts' }, ...sample],
+    width: 560,
+    height: 300,
+    scale: 'sqrt',
+  },
+}
+
+export const Truncated: Story = {
+  args: {
+    data: Array.from({ length: 200 }, (_, i) => ({ id: `n${i}`, value: 200 - i })),
+    width: 560,
+    height: 300,
+    maxTiles: 40,
+  },
+}

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

@@ -0,0 +1,67 @@
+import { describe, it, expect, vi } from 'vitest'
+import { render, screen, fireEvent } from '@testing-library/react'
+import { axe } from 'jest-axe'
+import { Treemap, type TreemapDatum } from './Treemap'
+
+const data: TreemapDatum[] = [
+  { id: 'a', value: 100, color: '#5B9BD5', label: 'A' },
+  { id: 'b', value: 40, color: '#14B8A6', label: 'B' },
+  { id: 'c', value: 10, color: '#F4A736', label: 'C' },
+]
+
+describe('Treemap', () => {
+  it('renders one tile per positive datum', () => {
+    render(<Treemap data={data} width={300} height={200} />)
+    expect(screen.getByTestId('treemap-tile-a')).toBeInTheDocument()
+    expect(screen.getByTestId('treemap-tile-b')).toBeInTheDocument()
+    expect(screen.getByTestId('treemap-tile-c')).toBeInTheDocument()
+  })
+
+  it('drops non-positive values', () => {
+    render(<Treemap data={[...data, { id: 'zero', value: 0 }]} width={300} height={200} />)
+    expect(screen.queryByTestId('treemap-tile-zero')).not.toBeInTheDocument()
+  })
+
+  it('folds overflow into a single "+M more" tile', () => {
+    const many = Array.from({ length: 10 }, (_, i) => ({ id: `n${i}`, value: 10 - i * 0.5 }))
+    render(<Treemap data={many} width={300} height={200} maxTiles={4} />)
+    expect(screen.getByTestId('treemap-tile-__more__')).toBeInTheDocument()
+    // 3 explicit + 1 fold = 4 tiles
+    expect(screen.getByLabelText('+7 more')).toBeInTheDocument()
+  })
+
+  it('fires onPress with the tile id', () => {
+    const onPress = vi.fn()
+    render(<Treemap data={data} width={300} height={200} onPress={onPress} />)
+    fireEvent.click(screen.getByTestId('treemap-tile-a'))
+    expect(onPress).toHaveBeenCalledWith('a')
+  })
+
+  it('does not fire onPress for the fold tile', () => {
+    const onPress = vi.fn()
+    const many = Array.from({ length: 6 }, (_, i) => ({ id: `n${i}`, value: 6 - i }))
+    render(<Treemap data={many} width={300} height={200} maxTiles={3} onPress={onPress} />)
+    fireEvent.click(screen.getByTestId('treemap-tile-__more__'))
+    expect(onPress).not.toHaveBeenCalled()
+  })
+
+  it('assigns fallback palette colors when omitted', () => {
+    const { container } = render(
+      <Treemap data={[{ id: 'x', value: 1 }]} width={100} height={100} />,
+    )
+    expect(container.firstChild).toBeInTheDocument()
+  })
+
+  it('renders nothing meaningful for all-zero data without crashing', () => {
+    render(<Treemap data={[{ id: 'z', value: 0 }]} width={100} height={100} />)
+    expect(screen.queryByTestId('treemap-tile-z')).not.toBeInTheDocument()
+  })
+
+  describe('accessibility', () => {
+    it('has no accessibility violations', async () => {
+      const { container } = render(<Treemap data={data} width={300} height={200} />)
+      const results = await axe(container)
+      expect(results).toHaveNoViolations()
+    })
+  })
+})

package/src/components/custom/Treemap/Treemap.tsx

@@ -0,0 +1,192 @@
+import React from 'react'
+import { View, Text, Pressable, type ViewProps } from 'react-native'
+import { cn } from '../../../utils/cn'
+
+export interface TreemapDatum {
+  /** Stable identity — returned by onPress and used as the React key. */
+  id: string
+  /** Area weight (e.g. size, count, severity). Non-positive values are dropped. */
+  value: number
+  /** Tile fill color. Falls back to a built-in categorical palette by index. */
+  color?: string
+  /** Optional label rendered inside sufficiently large tiles. */
+  label?: string
+}
+
+export type TreemapScale = 'linear' | 'sqrt' | 'log'
+
+export interface TreemapProps extends Omit<ViewProps, 'children'> {
+  data: TreemapDatum[]
+  /** Layout box. Required — the treemap fills exactly this area. */
+  width: number
+  height: number
+  /**
+   * Area scale. Real-world weights are often heavy-tailed, where one outlier
+   * under a `linear` scale swallows the whole canvas. `sqrt` (default) damps
+   * that while preserving order; `log` compresses hardest.
+   */
+  scale?: TreemapScale
+  /** Show at most N tiles; the remainder collapse into one "+M more" tile. */
+  maxTiles?: number
+  /** Fires with a tile's id on press (never for the "+M more" tile). */
+  onPress?: (id: string) => void
+  /** Draws a highlight border on the matching tile. */
+  selectedId?: string
+  className?: string
+}
+
+/** Titan categorical fallback palette (data-1..data-8). */
+const PALETTE = [
+  '#5B9BD5', '#14B8A6', '#F4A736', '#F83030',
+  '#823CA0', '#D4A520', '#406D87', '#43C6B7',
+]
+
+interface Rect {
+  x: number
+  y: number
+  w: number
+  h: number
+  datum: TreemapDatum
+}
+
+function scaleValue(v: number, scale: TreemapScale): number {
+  if (v <= 0) return 0
+  if (scale === 'sqrt') return Math.sqrt(v)
+  if (scale === 'log') return Math.log10(v + 1)
+  return v
+}
+
+function worstRatio(row: { area: number }[], side: number): number {
+  const sum = row.reduce((s, r) => s + r.area, 0)
+  const thickness = sum / side
+  let worst = 0
+  for (const r of row) {
+    const len = r.area / thickness
+    const ratio = Math.max(thickness / len, len / thickness)
+    if (ratio > worst) worst = ratio
+  }
+  return worst
+}
+
+/** Squarified treemap (Bruls, Huizing & van Wijk, 2000). */
+function squarify(data: TreemapDatum[], w: number, h: number): Rect[] {
+  const total = data.reduce((s, d) => s + d.value, 0)
+  if (total <= 0 || w <= 0 || h <= 0) return []
+  const scaled = data.map((d) => ({ datum: d, area: (d.value / total) * w * h }))
+  const out: Rect[] = []
+  let rx = 0
+  let ry = 0
+  let rw = w
+  let rh = h
+  let i = 0
+
+  while (i < scaled.length) {
+    const vertical = rw >= rh
+    const side = vertical ? rh : rw
+    let row: typeof scaled = []
+    let bestWorst = Infinity
+    let j = i
+    while (j < scaled.length) {
+      const trial = [...row, scaled[j]]
+      const worst = worstRatio(trial, side)
+      if (row.length > 0 && worst > bestWorst) break
+      row = trial
+      bestWorst = worst
+      j++
+    }
+    const rowArea = row.reduce((s, r) => s + r.area, 0)
+    const thickness = rowArea / side
+    let along = vertical ? ry : rx
+    for (const r of row) {
+      const len = r.area / thickness
+      out.push(
+        vertical
+          ? { x: rx, y: along, w: thickness, h: len, datum: r.datum }
+          : { x: along, y: ry, w: len, h: thickness, datum: r.datum },
+      )
+      along += len
+    }
+    if (vertical) {
+      rx += thickness
+      rw -= thickness
+    } else {
+      ry += thickness
+      rh -= thickness
+    }
+    i = j
+  }
+  return out
+}
+
+/**
+ * Squarified treemap. SVG-free (absolutely-positioned tiles) so it renders
+ * identically on web (react-native-web) and native. Layout is computed from
+ * `value`; color and labels are caller-supplied.
+ */
+export function Treemap({
+  data,
+  width,
+  height,
+  scale = 'sqrt',
+  maxTiles = 60,
+  onPress,
+  selectedId,
+  className,
+  ...props
+}: TreemapProps) {
+  const clean = data
+    .filter((d) => d.value > 0)
+    .sort((a, b) => b.value - a.value)
+    .map((d, i) => ({ ...d, color: d.color ?? PALETTE[i % PALETTE.length] }))
+
+  let tiles = clean
+  if (clean.length > maxTiles) {
+    const head = clean.slice(0, maxTiles - 1)
+    const restValue = clean.slice(maxTiles - 1).reduce((s, d) => s + d.value, 0)
+    tiles = [
+      ...head,
+      { id: '__more__', value: restValue, color: '#3a3a3a', label: `+${clean.length - (maxTiles - 1)} more` },
+    ]
+  }
+
+  const weighted = tiles.map((d) => ({ ...d, value: scaleValue(d.value, scale) }))
+  const rects = squarify(weighted, width, height)
+
+  return (
+    <View className={cn('relative', className)} style={{ width, height }} {...props}>
+      {rects.map((r) => {
+        const selected = r.datum.id === selectedId
+        const labelFits = r.w > 54 && r.h > 22
+        const pressable = r.datum.id !== '__more__'
+        return (
+          <Pressable
+            key={r.datum.id}
+            testID={`treemap-tile-${r.datum.id}`}
+            accessibilityLabel={r.datum.label ?? r.datum.id}
+            onPress={pressable ? () => onPress?.(r.datum.id) : undefined}
+            style={{
+              position: 'absolute',
+              left: r.x,
+              top: r.y,
+              width: Math.max(0, r.w - 2),
+              height: Math.max(0, r.h - 2),
+              backgroundColor: r.datum.color,
+              borderRadius: 3,
+              opacity: selected ? 1 : 0.9,
+              borderWidth: selected ? 2 : 0,
+              borderColor: '#ffffff',
+              padding: 4,
+              overflow: 'hidden',
+            }}
+          >
+            {labelFits && (
+              <Text numberOfLines={2} className="text-[10px] font-semibold text-[#0b0b0b]">
+                {r.datum.label ?? r.datum.id}
+              </Text>
+            )}
+          </Pressable>
+        )
+      })}
+    </View>
+  )
+}

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

@@ -0,0 +1,2 @@
+export { Treemap } from './Treemap'
+export type { TreemapProps, TreemapDatum, TreemapScale } from './Treemap'