feat(components): DialTile for sensor signal rows

src/components/DialTile.tsx

@@ -0,0 +1,65 @@
+import React from 'react';
+import { StyleSheet, Text, View, type ViewStyle } from 'react-native';
+import { colors, spacing, typography } from '../theme';
+
+type Tone = 'amber' | 'green' | 'red';
+
+type Props = {
+  readonly label: string;
+  readonly value: string;
+  readonly tone?: Tone;
+  readonly testID?: string;
+};
+
+function toneColor(tone: Tone | undefined): string {
+  if (tone === 'red') return colors.action;
+  if (tone === 'green') return colors.success;
+  return colors.warning;
+}
+
+export function DialTile({ label, value, tone = 'amber', testID }: Props) {
+  const markerStyle: ViewStyle = { backgroundColor: toneColor(tone) };
+  return (
+    <View
+      accessibilityLabel={`${label}: ${value}`}
+      style={styles.row}
+      testID={testID}
+    >
+      <View style={styles.markerWrap}>
+        <View style={[styles.marker, markerStyle]} />
+      </View>
+      <Text style={styles.value}>{value}</Text>
+      <Text style={styles.label}>{label}</Text>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  row: {
+    minHeight: 56,
+    flexDirection: 'row',
+    alignItems: 'center',
+    borderTopWidth: 1,
+    borderColor: colors.line,
+    paddingVertical: spacing.sm,
+    paddingHorizontal: spacing.md,
+    gap: spacing.md,
+  },
+  markerWrap: {
+    width: 4,
+    height: 32,
+    justifyContent: 'center',
+  },
+  marker: {
+    width: 2,
+    height: 32,
+  },
+  value: {
+    ...typography.detailNumeric,
+    flex: 1,
+  },
+  label: {
+    ...typography.label,
+    color: colors.textDim,
+  },
+});