@titan-design/react-ui 0.5.0 → 0.7.0

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

@@ -1,9 +1,9 @@
 import type { Meta, StoryObj } from '@storybook/react-vite'
 import { View, Text } from 'react-native'
-import { DateTime } from './DateTime'
+import { DateTime, type DateTimeFormat } from './DateTime'
 
 const meta: Meta<typeof DateTime> = {
-  title: 'Custom/DateTime',
+  title: 'Components/Molecules/DateTime',
   component: DateTime,
   tags: ['autodocs'],
   argTypes: {
@@ -25,9 +25,6 @@ export default meta
 type Story = StoryObj<typeof DateTime>
 
 const now = Date.now()
-const yesterday = now - 24 * 60 * 60 * 1000
-const lastWeek = now - 7 * 24 * 60 * 60 * 1000
-const nextWeek = now + 7 * 24 * 60 * 60 * 1000
 
 export const Default: Story = {
   args: {
@@ -53,7 +50,15 @@ export const AllFormats: Story = {
   },
 }
 
-function Row({ label, value, format }: { label: string; value: any; format: any }) {
+function Row({
+  label,
+  value,
+  format,
+}: {
+  label: string
+  value: number | Date | string
+  format: DateTimeFormat
+}) {
   return (
     <View className="flex-row items-center">
       <Text className="w-24 text-text-secondary text-sm">{label}:</Text>
@@ -62,6 +67,74 @@ function Row({ label, value, format }: { label: string; value: any; format: any
   )
 }
 
+/** Self-ticking clock (`live`), 24h, via the `mono` Typography variant — the substrate the shell TopBar uses. */
+export const LiveClock: Story = {
+  render: () => (
+    <View className="gap-4 p-6 bg-surface-elevated rounded-xl items-start">
+      <DateTime
+        live
+        format="time"
+        hour12={false}
+        variant="mono"
+        className="text-4xl text-text-primary"
+      />
+      <View className="flex-row items-center gap-3">
+        <DateTime live format="time" hour12={false} variant="mono" color="secondary" />
+        <Text className="text-text-tertiary text-xs">← ticks every second, 24h, mono</Text>
+      </View>
+    </View>
+  ),
+}
+
+/** With and without seconds (`seconds`). */
+export const Seconds: Story = {
+  render: () => {
+    const at = new Date(2024, 0, 1, 16, 12, 7)
+    return (
+      <View className="gap-3">
+        <View className="flex-row items-center">
+          <Text className="w-32 text-text-secondary text-sm">no seconds:</Text>
+          <DateTime value={at} format="time" hour12={false} variant="mono" color="primary" />
+        </View>
+        <View className="flex-row items-center">
+          <Text className="w-32 text-text-secondary text-sm">with seconds:</Text>
+          <DateTime
+            value={at}
+            format="time"
+            hour12={false}
+            seconds
+            variant="mono"
+            color="primary"
+          />
+        </View>
+        <View className="flex-row items-center">
+          <Text className="w-32 text-text-secondary text-sm">live w/ seconds:</Text>
+          <DateTime live format="time" hour12={false} seconds variant="mono" color="primary" />
+        </View>
+      </View>
+    )
+  },
+}
+
+/** 24h vs 12h for the same moment (`hour12`). */
+export const HourCycle: Story = {
+  render: () => {
+    const at = new Date(2024, 0, 1, 16, 12)
+    return (
+      <View className="gap-3">
+        <View className="flex-row items-center">
+          <Text className="w-24 text-text-secondary text-sm">24h:</Text>
+          <DateTime value={at} format="time" hour12={false} className="text-text-primary" />
+        </View>
+        <View className="flex-row items-center">
+          <Text className="w-24 text-text-secondary text-sm">12h:</Text>
+          <DateTime value={at} format="time" hour12 className="text-text-primary" />
+        </View>
+      </View>
+    )
+  },
+}
+
 export const RelativeTime: Story = {
   render: () => {
     const now = Date.now()
@@ -169,7 +242,10 @@ export const UsageExample: Story = {
       <View className="gap-2 p-4 bg-surface-elevated rounded-lg max-w-md">
         <Text className="text-lg font-semibold text-text-primary mb-2">Upcoming Events</Text>
         {items.map((item, index) => (
-          <View key={index} className="flex-row justify-between items-center py-2 border-b border-border">
+          <View
+            key={index}
+            className="flex-row justify-between items-center py-2 border-b border-border"
+          >
             <Text className="text-text-primary">{item.title}</Text>
             <DateTime value={item.date} format="relative" color="secondary" className="text-sm" />
           </View>

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

@@ -39,6 +39,34 @@ describe('DateTime', () => {
     expect(screen.getByText('N/A')).toBeInTheDocument()
   })
 
+  it('forces 24h time with hour12={false}', () => {
+    render(<DateTime value={new Date(2024, 0, 1, 16, 12)} format="time" hour12={false} />)
+    expect(screen.getByText('16:12')).toBeInTheDocument()
+  })
+
+  it('forces 12h time with hour12={true}', () => {
+    render(<DateTime value={new Date(2024, 0, 1, 16, 12)} format="time" hour12 />)
+    expect(screen.getByText(/4:12/)).toBeInTheDocument()
+  })
+
+  it('renders a live clock (ignores value, shows current time)', () => {
+    const { container } = render(<DateTime live format="time" hour12={false} />)
+    // renders a HH:MM string without crashing
+    expect(container.textContent).toMatch(/^\d{1,2}:\d{2}/)
+  })
+
+  it('includes seconds when seconds is set', () => {
+    render(<DateTime value={new Date(2024, 0, 1, 16, 12, 7)} format="time" hour12={false} seconds />)
+    expect(screen.getByText('16:12:07')).toBeInTheDocument()
+  })
+
+  it('renders through Typography when a variant is given', () => {
+    render(
+      <DateTime value={new Date(2024, 0, 1, 16, 12)} format="time" hour12={false} variant="mono" />
+    )
+    expect(screen.getByText('16:12')).toBeInTheDocument()
+  })
+
   it('renders Invalid Date for bad input', () => {
     render(<DateTime value="not-a-date" />)
     expect(screen.getByText('Invalid Date')).toBeInTheDocument()
@@ -136,9 +164,7 @@ describe('DateTime', () => {
 
   describe('accessibility', () => {
     it('has no accessibility violations', async () => {
-      const { container } = render(
-        <DateTime value={testDate} format="medium" isUTC />
-      )
+      const { container } = render(<DateTime value={testDate} format="medium" isUTC />)
       const results = await axe(container)
       expect(results).toHaveNoViolations()
     })

package/src/components/custom/DateTime/DateTime.tsx

@@ -1,8 +1,9 @@
-import React from 'react'
+import { useEffect, useState } from 'react'
 import { Text, type TextProps } from 'react-native'
 import { cn } from '../../../utils/cn'
+import { Typography, type TypographyVariant } from '../Typography'
 
-export type DateTimeFormat = 
+export type DateTimeFormat =
   | 'date' // 2024-01-15
   | 'time' // 14:30
   | 'datetime' // 2024-01-15 14:30
@@ -13,14 +14,24 @@ export type DateTimeFormat =
   | 'full' // Monday, January 15, 2024
 
 export interface DateTimeProps extends TextProps {
-  /** Date value (timestamp in ms, Date object, or ISO string) */
-  value: number | Date | string | null | undefined
+  /** Date value (timestamp in ms, Date object, or ISO string). Optional when `live`. */
+  value?: number | Date | string | null | undefined
   /** Display format */
   format?: DateTimeFormat
   /** Custom format string (overrides format) */
   customFormat?: string
   /** Whether to show in UTC */
   isUTC?: boolean
+  /** Force 12h (true) or 24h (false) for time/datetime formats; locale default when omitted. */
+  hour12?: boolean
+  /** Include seconds in time/datetime formats. */
+  seconds?: boolean
+  /** Render through Typography with this variant (e.g. 'mono'); plain inheriting Text when omitted. */
+  variant?: TypographyVariant
+  /** Track the current time and re-render on an interval (ignores `value`). For clocks / relative time. */
+  live?: boolean
+  /** Refresh interval in ms when `live` (default 1000). */
+  refreshMs?: number
   /** Fallback text when value is null/undefined */
   fallback?: string
   /** Text color */
@@ -42,10 +53,12 @@ const colorStyles = {
 function formatDate(
   value: number | Date | string,
   format: DateTimeFormat,
-  isUTC: boolean
+  isUTC: boolean,
+  hour12?: boolean,
+  seconds?: boolean
 ): string {
   const date = value instanceof Date ? value : new Date(value)
-  
+
   if (isNaN(date.getTime())) {
     return 'Invalid Date'
   }
@@ -57,7 +70,7 @@ function formatDate(
 
   // Use Intl.DateTimeFormat for locale-aware formatting
   const options: Intl.DateTimeFormatOptions = {}
-  
+
   switch (format) {
     case 'date':
       options.year = 'numeric'
@@ -101,6 +114,14 @@ function formatDate(
     options.timeZone = 'UTC'
   }
 
+  if (hour12 !== undefined && (options.hour !== undefined || options.minute !== undefined)) {
+    options.hour12 = hour12
+  }
+
+  if (seconds && options.hour !== undefined) {
+    options.second = '2-digit'
+  }
+
   return new Intl.DateTimeFormat(undefined, options).format(date)
 }
 
@@ -121,7 +142,7 @@ function getRelativeTime(date: Date): string {
   // Use Intl.RelativeTimeFormat if available
   if (typeof Intl !== 'undefined' && Intl.RelativeTimeFormat) {
     const rtf = new Intl.RelativeTimeFormat(undefined, { numeric: 'auto' })
-    
+
     if (Math.abs(diffSecs) < 60) {
       return rtf.format(diffSecs, 'second')
     }
@@ -197,24 +218,43 @@ export function DateTime({
   format = 'datetime',
   customFormat,
   isUTC = false,
+  hour12,
+  seconds,
+  variant,
+  live = false,
+  refreshMs = 1000,
   fallback = '-',
   color = 'inherit',
   className,
   ...props
 }: DateTimeProps) {
-  if (value === null || value === undefined) {
+  // When live, track "now" and re-render on an interval (the value prop is ignored).
+  const [now, setNow] = useState(() => Date.now())
+  useEffect(() => {
+    if (!live) return
+    const id = setInterval(() => setNow(Date.now()), refreshMs)
+    return () => clearInterval(id)
+  }, [live, refreshMs])
+
+  const effectiveValue = live ? now : value
+  const text =
+    effectiveValue === null || effectiveValue === undefined
+      ? fallback
+      : formatDate(effectiveValue, format, isUTC, hour12, seconds)
+
+  // Route through Typography (shared text substrate) when a variant is given;
+  // otherwise render a plain inheriting Text (backward-compatible default).
+  if (variant) {
     return (
-      <Text className={cn(colorStyles[color], className)} {...props}>
-        {fallback}
-      </Text>
+      <Typography variant={variant} color={color} className={className} {...props}>
+        {text}
+      </Typography>
     )
   }
 
-  const formattedDate = formatDate(value, format, isUTC)
-
   return (
     <Text className={cn(colorStyles[color], className)} {...props}>
-      {formattedDate}
+      {text}
     </Text>
   )
 }

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

@@ -3,7 +3,7 @@ import { View, Text } from 'react-native'
 import { EmptyState } from './EmptyState'
 
 const meta: Meta<typeof EmptyState> = {
-  title: 'Custom/EmptyState',
+  title: 'Components/Molecules/EmptyState',
   component: EmptyState,
   tags: ['autodocs'],
   argTypes: {

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

@@ -2,7 +2,7 @@ import type { Meta, StoryObj } from '@storybook/react-vite'
 import { Gauge } from './Gauge'
 
 const meta: Meta<typeof Gauge> = {
-  title: 'Custom/Gauge',
+  title: 'Components/DataViz/Gauge',
   component: Gauge,
   tags: ['autodocs'],
   argTypes: {

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

@@ -20,9 +20,9 @@ describe('Gauge', () => {
     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' })
+    expect(screen.getByTestId('gauge-value')).toHaveStyle({ color: '#F9B415' })
     rerender(<Gauge value={90} />)
-    expect(screen.getByTestId('gauge-value')).toHaveStyle({ color: '#14B8A6' })
+    expect(screen.getByTestId('gauge-value')).toHaveStyle({ color: '#2ED573' })
   })
 
   it('honors a single-color override over thresholds', () => {

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

@@ -1,5 +1,8 @@
 import { View, Text, type ViewProps } from 'react-native'
 import { cn } from '../../../utils/cn'
+import { getSemanticColors } from '../../../theme/tokens/semantic'
+
+const sem = getSemanticColors('dark')
 
 export interface GaugeThreshold {
   /** Band start, in the gauge's value units. */
@@ -30,9 +33,9 @@ export interface GaugeProps extends Omit<ViewProps, 'children'> {
   className?: string
 }
 
-const STATUS_SUCCESS = '#14B8A6'
-const STATUS_WARNING = '#FFB020'
-const STATUS_ERROR = '#D14343'
+const STATUS_SUCCESS = sem['status-success']
+const STATUS_WARNING = sem['status-warning']
+const STATUS_ERROR = sem['status-error']
 const TRACK = 'rgba(255,255,255,0.08)'
 
 /** Titan status-token bands for a 0–100 score. */

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

@@ -3,7 +3,7 @@ import { View } from 'react-native'
 import { Metric, MetricGroup } from './Metric'
 
 const meta: Meta<typeof Metric> = {
-  title: 'Custom/Metric',
+  title: 'Components/Molecules/Metric',
   component: Metric,
   tags: ['autodocs'],
   argTypes: {

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

@@ -2,7 +2,7 @@ import type { Meta, StoryObj } from '@storybook/react-vite'
 import { Scatter, type ScatterDatum } from './Scatter'
 
 const meta: Meta<typeof Scatter> = {
-  title: 'Custom/Scatter',
+  title: 'Components/DataViz/Scatter',
   component: Scatter,
   tags: ['autodocs'],
   argTypes: {

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

@@ -1,5 +1,6 @@
 import { View, Text, Pressable, type ViewProps } from 'react-native'
 import { cn } from '../../../utils/cn'
+import { DATAVIZ_CATEGORICAL_PALETTE } from '../../../theme/extracted-colors-dataviz'
 
 export interface ScatterDatum {
   /** Stable identity — returned by onPress and used as the React key. */
@@ -45,11 +46,8 @@ export interface ScatterProps extends Omit<ViewProps, 'children'> {
   className?: string
 }
 
-/** Titan categorical fallback palette (data-1..data-8). */
-const PALETTE = [
-  '#5B9BD5', '#14B8A6', '#F4A736', '#F83030',
-  '#823CA0', '#D4A520', '#406D87', '#43C6B7',
-]
+/** 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)'

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

@@ -11,7 +11,7 @@ import {
 } from './Sidebar'
 
 const meta: Meta<typeof Sidebar> = {
-  title: 'Custom/Sidebar',
+  title: 'Components/Organisms/Sidebar',
   component: Sidebar,
   tags: ['autodocs'],
   argTypes: {

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

@@ -42,7 +42,7 @@ const manyUsers: User[] = Array.from({ length: 50 }, (_, i) => ({
 }))
 
 const meta: Meta<typeof Table> = {
-  title: 'Custom/Table',
+  title: 'Components/Organisms/Table',
   component: Table,
   tags: ['autodocs'],
   argTypes: {

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

@@ -0,0 +1,62 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import { View } from 'react-native'
+import { TimerReadout } from './TimerReadout'
+
+/**
+ * `TimerReadout` — a small textual timer (⏱ + mono, right-justified) built on the
+ * `useTimer` hook. Only the live/current value goes green (status-live-muted) while
+ * `running`; the ` / total` suffix stays dim tertiary.
+ */
+const meta: Meta<typeof TimerReadout> = {
+  title: 'Custom/TimerReadout',
+  component: TimerReadout,
+  tags: ['autodocs'],
+  parameters: {
+    docs: {
+      description: {
+        component: '**Atom.** A small textual timer on [useTimer]. Used-by ↑ SessionHeader.',
+      },
+    },
+  },
+  decorators: [
+    (Story) => (
+      <View style={{ padding: 16, backgroundColor: '#131313', alignItems: 'flex-end', width: 200 }}>
+        <Story />
+      </View>
+    ),
+  ],
+}
+
+export default meta
+type Story = StoryObj<typeof TimerReadout>
+
+/** Live stopwatch (controlled), ticking → the elapsed value is green. */
+export const Running: Story = {
+  args: { mode: 'up', elapsedMs: 42 * 60000 + 18 * 1000, running: true },
+}
+
+/** Paused → the value drops to secondary (no live cue). */
+export const Paused: Story = {
+  args: { mode: 'up', elapsedMs: 42 * 60000 + 18 * 1000, running: false },
+}
+
+/** Countdown, running → shows remaining time, green while live. */
+export const CountdownRunning: Story = {
+  args: { mode: 'down', durationMs: 90 * 1000, elapsedMs: 27 * 1000, running: true },
+}
+
+/** With a ` / total` budget suffix (dim tertiary). */
+export const WithTotal: Story = {
+  args: {
+    mode: 'up',
+    elapsedMs: 42 * 60000 + 18 * 1000,
+    durationMs: 60 * 60000,
+    showTotal: true,
+    running: true,
+  },
+}
+
+/** Self-ticking stopwatch — the internal interval advances the value once per second. */
+export const LiveAutoTick: Story = {
+  args: { mode: 'up', autoTick: true, running: true },
+}

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

@@ -0,0 +1,72 @@
+import { describe, it, expect, vi, afterEach } from 'vitest'
+import { render, screen, act } from '@testing-library/react'
+import { TimerReadout } from './TimerReadout'
+import { getSemanticColors } from '../../../theme/tokens/semantic'
+import { primitiveRamps } from '../../../theme/tokens/primitives'
+
+const semantic = getSemanticColors('dark')
+const LIVE_GREEN = primitiveRamps.green[500]
+const SECONDARY = semantic['text-secondary']
+const TERTIARY = semantic['text-tertiary']
+
+afterEach(() => {
+  vi.useRealTimers()
+})
+
+describe('TimerReadout', () => {
+  it('renders elapsed mm:ss from a controlled up-timer', () => {
+    render(<TimerReadout mode="up" elapsedMs={65 * 1000} />)
+    expect(screen.getByTestId('timer-readout-current')).toHaveTextContent('1:05')
+  })
+
+  it('renders the default ⏱ glyph', () => {
+    render(<TimerReadout elapsedMs={0} />)
+    expect(screen.getByTestId('timer-readout-glyph')).toHaveTextContent('⏱')
+  })
+
+  it('accepts a custom glyph', () => {
+    render(<TimerReadout elapsedMs={0} glyph="◷" />)
+    expect(screen.getByTestId('timer-readout-glyph')).toHaveTextContent('◷')
+  })
+
+  it('shows the current value in live green while running', () => {
+    render(<TimerReadout mode="up" elapsedMs={0} running />)
+    expect(screen.getByTestId('timer-readout-current')).toHaveStyle({ color: LIVE_GREEN })
+    expect(screen.getByTestId('timer-readout-glyph')).toHaveStyle({ color: LIVE_GREEN })
+  })
+
+  it('shows the current value in secondary when paused', () => {
+    render(<TimerReadout mode="up" elapsedMs={0} running={false} />)
+    expect(screen.getByTestId('timer-readout-current')).toHaveStyle({ color: SECONDARY })
+  })
+
+  it('shows remaining time in down mode', () => {
+    render(<TimerReadout mode="down" durationMs={90 * 1000} elapsedMs={27 * 1000} running />)
+    expect(screen.getByTestId('timer-readout-current')).toHaveTextContent('1:03')
+  })
+
+  it('appends the total in dim tertiary when showTotal is set', () => {
+    render(
+      <TimerReadout mode="up" elapsedMs={42 * 1000} durationMs={60 * 60000} showTotal running />
+    )
+    const total = screen.getByTestId('timer-readout-total')
+    expect(total).toHaveTextContent('/ 60:00')
+    expect(total).toHaveStyle({ color: TERTIARY })
+  })
+
+  it('omits the total when showTotal is false', () => {
+    render(<TimerReadout mode="up" elapsedMs={0} durationMs={60000} />)
+    expect(screen.queryByTestId('timer-readout-total')).toBeNull()
+  })
+
+  it('self-ticks once per second while running with autoTick', () => {
+    vi.useFakeTimers()
+    render(<TimerReadout mode="up" autoTick running />)
+    expect(screen.getByTestId('timer-readout-current')).toHaveTextContent('0:00')
+
+    act(() => {
+      vi.advanceTimersByTime(3000)
+    })
+    expect(screen.getByTestId('timer-readout-current')).toHaveTextContent('0:03')
+  })
+})

package/src/components/custom/TimerReadout/TimerReadout.tsx

@@ -0,0 +1,75 @@
+import { type ReactNode } from 'react'
+import { View, Text, type ViewProps } from 'react-native'
+import { cn } from '../../../utils/cn'
+import { useTimer, formatDuration, type TimerMode } from '../../../hooks/useTimer'
+import { Typography } from '../Typography'
+import { getSemanticColors } from '../../../theme/tokens/semantic'
+import { primitiveRamps } from '../../../theme/tokens/primitives'
+
+const semantic = getSemanticColors('dark')
+// status-live-muted — the SideNav "Live" cue; the elapsed value goes green while ticking.
+const LIVE_GREEN = primitiveRamps.green[500]
+const SECONDARY = semantic['text-secondary']
+const TERTIARY = semantic['text-tertiary']
+
+const DEFAULT_GLYPH = '⏱'
+
+export interface TimerReadoutProps extends ViewProps {
+  /** 'up' counts elapsed upward; 'down' counts remaining toward 0. Default 'up'. */
+  mode?: TimerMode
+  /** Controlled elapsed time in ms. When set, the value is derived from it and never self-ticks. */
+  elapsedMs?: number
+  /** Total duration in ms — required for 'down' mode and for the ` / total` suffix. */
+  durationMs?: number
+  /** Live cue: the current value goes green while true. */
+  running?: boolean
+  /** Enable the internal 1s interval (ignored when `elapsedMs` is controlled). */
+  autoTick?: boolean
+  /** When `durationMs` is set, append ` / mm:ss`. */
+  showTotal?: boolean
+  /** Leading glyph; defaults to the ⏱ unicode. */
+  glyph?: ReactNode
+}
+
+/**
+ * Atom · TimerReadout — a small textual timer (⏱ + mono, right-justified) built on
+ * [useTimer]. Matches the TopBar clock treatment: only the live/current value goes
+ * green (status-live-muted) while `running`; the ` / total` suffix stays dim tertiary.
+ */
+export function TimerReadout({
+  mode = 'up',
+  elapsedMs,
+  durationMs,
+  running = false,
+  autoTick = false,
+  showTotal = false,
+  glyph = DEFAULT_GLYPH,
+  className,
+  ...rest
+}: TimerReadoutProps) {
+  const { label } = useTimer({ mode, durationMs, elapsedMs, running, autoTick })
+
+  const currentColor = running ? LIVE_GREEN : SECONDARY
+  const total = showTotal && durationMs != null ? formatDuration(durationMs) : null
+
+  return (
+    <View
+      accessibilityRole="timer"
+      accessibilityLabel={total != null ? `${label} of ${total}` : label}
+      className={cn('flex-row items-baseline justify-end', className)}
+      {...rest}
+    >
+      <Typography variant="mono" style={{ fontSize: 11, textAlign: 'right' }}>
+        <Text testID="timer-readout-glyph" style={{ color: currentColor, marginRight: 3 }}>
+          {glyph}
+        </Text>
+        <Text testID="timer-readout-current" style={{ color: currentColor }}>
+          {label}
+        </Text>
+        {total != null ? (
+          <Text testID="timer-readout-total" style={{ color: TERTIARY }}>{` / ${total}`}</Text>
+        ) : null}
+      </Typography>
+    </View>
+  )
+}

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

@@ -0,0 +1 @@
+export { TimerReadout, type TimerReadoutProps } from './TimerReadout'

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

@@ -2,7 +2,7 @@ import type { Meta, StoryObj } from '@storybook/react-vite'
 import { Treemap, type TreemapDatum } from './Treemap'
 
 const meta: Meta<typeof Treemap> = {
-  title: 'Custom/Treemap',
+  title: 'Components/DataViz/Treemap',
   component: Treemap,
   tags: ['autodocs'],
   argTypes: {

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

@@ -1,6 +1,7 @@
 import React from 'react'
 import { View, Text, Pressable, type ViewProps } from 'react-native'
 import { cn } from '../../../utils/cn'
+import { DATAVIZ_CATEGORICAL_PALETTE } from '../../../theme/extracted-colors-dataviz'
 
 export interface TreemapDatum {
   /** Stable identity — returned by onPress and used as the React key. */
@@ -35,11 +36,8 @@ export interface TreemapProps extends Omit<ViewProps, 'children'> {
   className?: string
 }
 
-/** Titan categorical fallback palette (data-1..data-8). */
-const PALETTE = [
-  '#5B9BD5', '#14B8A6', '#F4A736', '#F83030',
-  '#823CA0', '#D4A520', '#406D87', '#43C6B7',
-]
+/** Titan categorical fallback palette (see extracted-colors-dataviz). */
+const PALETTE = DATAVIZ_CATEGORICAL_PALETTE
 
 interface Rect {
   x: number