@titan-design/react-ui 0.2.6 → 0.3.0

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'

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/Table/Table.test.tsx

@@ -515,6 +515,33 @@ describe('Table', () => {
       expect(screen.getByRole('button', { name: /sort by name/i })).toBeInTheDocument()
     })
 
+    it('exposes real ARIA table semantics (table/rowgroup/row/columnheader/cell)', () => {
+      renderBasicTable()
+      expect(screen.getByRole('table')).toBeInTheDocument()
+      // header rowgroup + body rowgroup
+      expect(screen.getAllByRole('rowgroup')).toHaveLength(2)
+      // 1 header row + 2 body rows
+      expect(screen.getAllByRole('row')).toHaveLength(3)
+      expect(screen.getAllByRole('columnheader')).toHaveLength(3)
+      expect(screen.getAllByRole('cell')).toHaveLength(6)
+    })
+
+    it('sortable header reflects sort state via aria-sort', () => {
+      render(
+        <Table sortColumn="name" sortDirection="asc" onSort={vi.fn()}>
+          <TableHeader>
+            <TableRow>
+              <TableHeaderCell sortKey="name">Name</TableHeaderCell>
+              <TableHeaderCell sortKey="email">Email</TableHeaderCell>
+            </TableRow>
+          </TableHeader>
+        </Table>
+      )
+      const [name, email] = screen.getAllByRole('columnheader')
+      expect(name).toHaveAttribute('aria-sort', 'ascending')
+      expect(email).toHaveAttribute('aria-sort', 'none')
+    })
+
     it('pagination buttons have accessible labels', () => {
       render(
         <TablePagination

package/src/components/custom/Table/Table.tsx

@@ -101,7 +101,7 @@ export function Table({
     >
       <View className={cn('w-full', className)} {...props}>
         <ScrollView horizontal showsHorizontalScrollIndicator={false}>
-          <View className="w-full min-w-full">
+          <View role="table" className="w-full min-w-full">
             {isLoading ? (
               <TableLoadingSkeleton rowCount={loadingRowCount} />
             ) : (
@@ -125,7 +125,7 @@ export interface TableHeaderProps {
 export function TableHeader({ children, className }: TableHeaderProps) {
   return (
     <View
-      accessibilityRole="none"
+      role="rowgroup"
       className={cn('bg-background-subtle rounded-t-lg', className)}
     >
       {children}
@@ -143,7 +143,7 @@ export interface TableBodyProps {
  */
 export function TableBody({ children, className }: TableBodyProps) {
   return (
-    <View accessibilityRole="none" className={className}>
+    <View role="rowgroup" className={className}>
       {children}
     </View>
   )
@@ -171,7 +171,7 @@ export function TableRow({
 }: TableRowProps) {
   return (
     <View
-      accessibilityRole="none"
+      role="row"
       className={cn(
         'flex-row border-b border-divider',
         isHoverable && 'web:hover:bg-interactive-hover',
@@ -212,6 +212,13 @@ export function TableHeaderCell({
   const { sortColumn, sortDirection, onSort } = useContext(TableContext)
   const isSorted = sortKey && sortColumn === sortKey
   const isSortable = !!sortKey && !!onSort
+  const ariaSort = isSorted
+    ? sortDirection === 'asc'
+      ? 'ascending'
+      : sortDirection === 'desc'
+        ? 'descending'
+        : 'none'
+    : 'none'
 
   const handlePress = (e: any) => {
     if (isSortable && sortKey) {
@@ -245,27 +252,35 @@ export function TableHeaderCell({
   )
 
   if (isSortable) {
+    // columnheader cell wraps the sort button so it carries proper table
+    // semantics (role + aria-sort) while the inner control keeps its button role.
     return (
-      <Pressable
-        accessibilityRole="button"
-        accessibilityLabel={`Sort by ${children}`}
-        onPress={handlePress}
+      <View
+        role="columnheader"
+        aria-sort={ariaSort}
         style={width ? { width } : { flex: 1 }}
-        className={cn(
-          'flex-row items-center px-4 py-3',
-          alignStyles[align],
-          'web:hover:bg-interactive-hover active:bg-interactive-active',
-          className
-        )}
-        {...props}
       >
-        {content}
-      </Pressable>
+        <Pressable
+          accessibilityRole="button"
+          accessibilityLabel={`Sort by ${children}`}
+          onPress={handlePress}
+          className={cn(
+            'flex-row items-center px-4 py-3',
+            alignStyles[align],
+            'web:hover:bg-interactive-hover active:bg-interactive-active',
+            className
+          )}
+          {...props}
+        >
+          {content}
+        </Pressable>
+      </View>
     )
   }
 
   return (
     <View
+      role="columnheader"
       style={width ? { width } : { flex: 1 }}
       className={cn(
         'flex-row items-center px-4 py-3',
@@ -306,6 +321,7 @@ export function TableCell({
 
   return (
     <View
+      role="cell"
       style={width ? { width } : { flex: 1 }}
       className={cn(
         'justify-center px-4 py-3.5',

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,
+  },
+}