NVIDIA-NeMo · steramae-nvidia · Sep 12, 2026 · coderabbitai · Sep 12, 2026
@@ -0,0 +1,101 @@
+// SPDX-FileCopyrightText: Copyright (c) 2025-2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.
+// SPDX-License-Identifier: Apache-2.0
+
+import {
+  DeltaText,
+  type DeltaTextSize,
+  formatSignedDelta,
+} from '@nemo/common/src/components/DeltaText/index';
+import { Flex, Stack, Text } from '@nvidia/foundations-react-core';
+import type { Meta, StoryObj } from '@storybook/react';
+
+const meta: Meta<typeof DeltaText> = {
+  component: DeltaText,
+  title: 'Studio Common/DeltaText',
+  args: { size: 'md' },
+  argTypes: {
+    size: { control: 'inline-radio', options: ['xs', 'sm', 'md', 'lg', 'xl'] },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof DeltaText>;
+
+export const Improved: Story = {
+  args: { value: 0.07 },
+};
+
+export const Regressed: Story = {
+  args: { value: -0.07 },
+};
+
+export const Unchanged: Story = {
+  args: { value: 0 },
+};
+
+/** Latency fell, which is the good news — the triangle points down but the text stays green. */
+export const LowerIsBetter: Story = {
+  args: { value: -120, higherIsBetter: false, format: (value) => `${value.toFixed(0)} ms` },
+};
+
+/**
+ * A qualifier after the value — what the delta is measured against — rides along in `format`, so it
+ * picks up the same tint and sits on the same line as the number.
+ *
+ * `kind` rather than `size` here because the design's 12px falls between the `xs` and `sm` steps.
+ */
+export const WithQualifier: Story = {
+  args: {
+    value: -18,
+    higherIsBetter: false,
+    format: (value) => `${formatSignedDelta(value, 0)}% vs baseline`,
+    kind: 'body/semibold/sm',
+  },
+};
+
+/** The qualifier is context, not part of the magnitude, so keep it out of the spoken name. */
+export const WithQualifierCustomLabel: Story = {
+  args: {
+    ...WithQualifier.args,
+    'aria-label': 'Improved by 18 percent versus baseline',
+  },
+};
+
+const SIZES: [DeltaTextSize, string][] = [
+  ['xs', '10px'],
+  ['sm', '14px'],
+  ['md', '18px'],
+  ['lg', '24px'],
+  ['xl', '32px'],
+];
+
+/** The glyph is sized in `em`, so it holds the text's cap height at every step. */
+export const Sizes: Story = {
+  render: () => (
+    <Stack gap="density-md">
+      {SIZES.map(([size, px]) => (
+        <Flex key={size} align="center" gap="density-lg">
+          <Text kind="label/regular/sm" className="w-20 text-secondary">
+            {size} · {px}
+          </Text>
+          <DeltaText value={0.07} size={size} />
+          <DeltaText value={-0.07} size={size} />
+          <DeltaText value={0} size={size} />
+        </Flex>
+      ))}
+    </Stack>
+  ),
+};
+
+/** The compact `xs` treatment the design uses, sitting under the value it qualifies. */
+export const InContext: Story = {
+  render: () => (
+    <Stack gap="density-sm">
+      <Text kind="label/bold/2xl" className="tabular-nums">
+        0.84
+      </Text>
+      <DeltaText value={0.07} />
+    </Stack>
+  ),
+};
@@ -0,0 +1,111 @@
+// SPDX-FileCopyrightText: Copyright (c) 2025-2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.
+// SPDX-License-Identifier: Apache-2.0
+
+import { DeltaText, deltaTone, formatSignedDelta } from '@nemo/common/src/components/DeltaText';
+import { render, screen } from '@testing-library/react';
+
+describe('formatSignedDelta', () => {
+  it('signs the value and uses a true minus', () => {
+    expect(formatSignedDelta(0.07)).toBe('+0.07');
+    expect(formatSignedDelta(-0.07)).toBe('−0.07');
+    expect(formatSignedDelta(0)).toBe('0.00');
+    expect(formatSignedDelta(1.25, 1)).toBe('+1.3');
+  });
+});
+
+describe('deltaTone', () => {
+  it('flips with the metric direction', () => {
+    expect(deltaTone(1)).toBe('improved');
+    expect(deltaTone(-1)).toBe('regressed');
+    expect(deltaTone(1, false)).toBe('regressed');
+    expect(deltaTone(-1, false)).toBe('improved');
+    expect(deltaTone(0, false)).toBe('unchanged');
+  });
+});
+
+describe('DeltaText', () => {
+  it('renders a rise as an improvement', () => {
+    render(<DeltaText value={0.07} />);
+
+    const delta = screen.getByTestId('delta-text');
+    expect(delta).toHaveAttribute('data-delta', 'improved');
+    expect(delta).toHaveTextContent('+0.07');
+    expect(delta).toHaveAccessibleName('Improved by 0.07');
+  });
+
+  it('tints a fall as a regression and points the triangle down', () => {
+    render(<DeltaText value={-0.07} />);
+
+    expect(screen.getByTestId('delta-text')).toHaveAttribute('data-delta', 'regressed');
+    expect(screen.getByTestId('delta-text-icon')).toHaveClass('rotate-180');
+  });
+
+  it('reads a fall as an improvement when lower is better', () => {
+    render(<DeltaText value={-0.07} higherIsBetter={false} />);
+
+    expect(screen.getByTestId('delta-text')).toHaveAttribute('data-delta', 'improved');
+  });
+
+  it('keeps an equals glyph in the gutter when nothing moved', () => {
+    render(<DeltaText value={0} />);
+
+    expect(screen.getByTestId('delta-text')).toHaveAttribute('data-delta', 'unchanged');
+    expect(screen.getByTestId('delta-text')).toHaveAccessibleName('No change');
+
+    // Same gutter as a moved row, so a column of deltas stays aligned.
+    const icon = screen.getByTestId('delta-text-icon');
+    expect(icon).toHaveAttribute('width', '0.72em');
+    expect(icon).not.toHaveClass('fill-current');
+  });
+
+  it('sizes the glyph in em so it follows the text at every step', () => {
+    const { rerender } = render(<DeltaText value={0.07} size="xs" />);
+    expect(screen.getByTestId('delta-text-icon')).toHaveAttribute('width', '0.72em');
+
+    rerender(<DeltaText value={0.07} size="xl" />);
+    const icon = screen.getByTestId('delta-text-icon');
+    expect(icon).toHaveAttribute('width', '0.72em');
+    expect(icon).toHaveAttribute('height', '0.72em');
+  });
+
+  it('steps the type scale with `size`', () => {
+    const { rerender } = render(<DeltaText value={0.07} />);
+    expect(screen.getByTestId('delta-text')).toHaveClass('nv-text--body-semibold-xs');
+
+    // `lg` reaches past the adjacent step onto 24px, so the top of the scale reads as large.
+    rerender(<DeltaText value={0.07} size="lg" />);
+    expect(screen.getByTestId('delta-text')).toHaveClass('nv-text--body-semibold-2xl');
+
+    rerender(<DeltaText value={0.07} size="xl" />);
+    expect(screen.getByTestId('delta-text')).toHaveClass('nv-text--body-semibold-3xl');
+  });
+
+  it('lets `kind` override the weight `size` picks', () => {
+    render(<DeltaText value={0.07} size="lg" kind="label/regular/sm" />);
+
+    expect(screen.getByTestId('delta-text')).toHaveClass('nv-text--label-regular-sm');
+    expect(screen.getByTestId('delta-text')).not.toHaveClass('nv-text--body-semibold-2xl');
+  });
+
+  it('carries a trailing qualifier through `format`', () => {
+    render(
+      <DeltaText
+        value={-18}
+        higherIsBetter={false}
+        format={(value) => `${formatSignedDelta(value, 0)}% vs baseline`}
+      />
+    );
+
+    const delta = screen.getByTestId('delta-text');
+    expect(delta).toHaveTextContent('−18% vs baseline');
+    // Lower is better here, so a fall is the good news.
+    expect(delta).toHaveAttribute('data-delta', 'improved');
+    expect(delta).toHaveAccessibleName('Improved by 18% vs baseline');
+  });
+
+  it('honors a custom format', () => {
+    render(<DeltaText value={-120} higherIsBetter={false} format={(v) => `${v} ms`} />);
+
+    expect(screen.getByTestId('delta-text')).toHaveTextContent('-120 ms');
+  });
+});
@@ -0,0 +1,119 @@
+// SPDX-FileCopyrightText: Copyright (c) 2025-2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.
+// SPDX-License-Identifier: Apache-2.0
+
+import { Text } from '@nvidia/foundations-react-core';
+import cn from 'classnames';
+import { Equal, Triangle } from 'lucide-react';
+import type { ComponentProps, FC } from 'react';
+
+export type DeltaTone = 'improved' | 'regressed' | 'unchanged';
+
+export type DeltaTextSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+
+type TextKind = ComponentProps<typeof Text>['kind'];
+
+export interface DeltaTextProps {
+  value: number;
+  /** When false, a lower value is the improvement (latency, cost, error rate). */
+  higherIsBetter?: boolean;
+  format?: (value: number) => string;
+  /**
+   * One step of the type scale, carrying the glyph with it. `xs` is the compact treatment the
+   * design uses inside cards and table cells; step up when the delta sits beside a larger value.
+   */
+  size?: DeltaTextSize;
+  /**
+   * Escape hatch for a caller that needs a different weight or family than the semibold `size`
+   * picks — e.g. `label/regular/sm`. Wins over `size`, and the glyph still tracks it.
+   */
+  kind?: TextKind;
+  'aria-label'?: string;
+  className?: string;
+}
+
+const TONE_CLASS_NAME: Record<DeltaTone, string> = {
+  improved: 'text-[color:var(--text-color-brand)]',
+  regressed: 'text-[color:var(--text-color-accent-red)]',
+  unchanged: 'text-secondary',
+};
+
+/**
+ * Spread across the full type scale — 10, 14, 18, 24, 32px — rather than the adjacent steps, which
+ * bunch between 10 and 18 and leave nothing that reads as large next to a headline figure. Each
+ * step is roughly a third up on the one below it, so the difference is visible at a glance.
+ *
+ * The glyph is sized in `em`, so picking the step here is the whole job — the triangle follows the
+ * text rather than needing its own scale.
+ */
+const SIZE_KIND: Record<DeltaTextSize, TextKind> = {
+  xs: 'body/semibold/xs',
+  sm: 'body/semibold/md',
+  md: 'body/semibold/xl',
+  lg: 'body/semibold/2xl',
+  xl: 'body/semibold/3xl',
+};
+
+/**
+ * Signs the value and keeps the minus a true minus (U+2212) rather than a hyphen, so a column of
+ * deltas lines up against `tabular-nums`.
+ */
+export const formatSignedDelta = (value: number, fractionDigits = 2): string =>
+  `${value > 0 ? '+' : value < 0 ? '−' : ''}${Math.abs(value).toFixed(fractionDigits)}`;
-export const formatSignedDelta = (value: number, fractionDigits = 2): string =>
-  `${value > 0 ? '+' : value < 0 ? '−' : ''}${Math.abs(value).toFixed(fractionDigits)}`;
+export const formatSignedDelta = (value: number, fractionDigits = 2): string => {
+  const magnitude = Math.abs(value).toFixed(fractionDigits);
+  const sign = Number(magnitude) === 0 ? '' : value > 0 ? '+' : '−';
+  return `${sign}${magnitude}`;
+};
-export const formatSignedDelta = (value: number, fractionDigits = 2): string =>
-  `${value > 0 ? '+' : value < 0 ? '−' : ''}${Math.abs(value).toFixed(fractionDigits)}`;
+export const formatSignedDelta = (value: number, fractionDigits = 2): string => {
+  const magnitude = Math.abs(value).toFixed(fractionDigits);
+  const sign = Number(magnitude) === 0 ? '' : value > 0 ? '+' : '−';
+  return `${sign}${magnitude}`;
+};
+
+/** Which direction of travel is good news, and so which way the delta is tinted. */
+export const deltaTone = (value: number, higherIsBetter = true): DeltaTone => {
+  if (value === 0) {
+    return 'unchanged';
+  }
+  return (higherIsBetter ? value > 0 : value < 0) ? 'improved' : 'regressed';
+};
+
+/**
+ * A signed metric change as bare tinted text with a triangle: green for an improvement, red for a
+ * regression.
+ */
+export const DeltaText: FC<DeltaTextProps> = ({
+  value,
+  higherIsBetter = true,
+  format = formatSignedDelta,
+  size = 'xs',
+  kind,
+  'aria-label': ariaLabel,
+  className,
+}) => {
+  const tone = deltaTone(value, higherIsBetter);
+  const Icon = value === 0 ? Equal : Triangle;
+  const magnitude = format(Math.abs(value)).replace(/^[+−-]/, '');
+  const label =
+    ariaLabel ??
+    (tone === 'unchanged'
+      ? 'No change'
+      : `${tone === 'improved' ? 'Improved' : 'Regressed'} by ${magnitude}`);
+
+  return (
+    <Text
+      kind={kind ?? SIZE_KIND[size]}
+      aria-label={label}
+      data-testid="delta-text"
+      data-delta={tone}
+      className={cn(
+        'inline-flex items-center gap-[0.25em] whitespace-nowrap tabular-nums',
+        TONE_CLASS_NAME[tone],
+        className
+      )}
+    >
+      <Icon
+        aria-hidden
+        data-testid="delta-text-icon"
+        size="0.72em"
+        strokeWidth={1}
+        className={cn(
+          'shrink-0 stroke-current',
+          tone === 'unchanged' ? 'stroke-2' : 'fill-current',
+          value < 0 && 'rotate-180'
+        )}
+      />
+      {format(value)}
+    </Text>
+  );
+};
@@ -9,11 +9,7 @@ import svgr from 'vite-plugin-svgr';
 const __dirname = path.dirname(fileURLToPath(import.meta.url));
 
 const config: StorybookConfig = {
-  stories: [
-    '../../studio/src/**/*.stories.@(ts|tsx)',
-    '../../common/src/**/*.stories.@(ts|tsx)',
-    '../../sandbox/**/*.stories.@(ts|tsx)',
-  ],
+  stories: ['../../studio/src/**/*.stories.@(ts|tsx)', '../../common/src/**/*.stories.@(ts|tsx)'],
   staticDirs: ['../public'],
   addons: ['@storybook/addon-a11y'],
   framework: {

@@ -1,6 +1,11 @@
 // SPDX-FileCopyrightText: Copyright (c) 2025-2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.
 // SPDX-License-Identifier: Apache-2.0
 
+import {
+  type DeltaTone,
+  deltaTone,
+  formatSignedDelta,
+} from '@nemo/common/src/components/DeltaText';
 import { Flex, Stack, Tag, Text } from '@nvidia/foundations-react-core';
 import { SeriesButtonGroup } from '@studio/components/charts/MetricTrend/SeriesButtonGroup';
 import { useNvColorMode } from '@studio/components/DagCanvas/useNvColorMode';
@@ -66,8 +71,14 @@ const AREA_GRADIENT = {
 
 const formatPercent = (value: number): string => `${value.toFixed(1)}%`;
 
-const formatSignedDelta = (delta: number): string =>
-  `${delta > 0 ? '+' : delta < 0 ? '−' : ''}${Math.abs(delta).toFixed(1)}`;
+const formatTrendDelta = (delta: number): string => formatSignedDelta(delta, 1);
+
+/** The chip form of the same green/red/muted scale {@link DeltaText} paints as bare text. */
+const TAG_COLOR: Record<DeltaTone, 'green' | 'red' | 'gray'> = {
+  improved: 'green',
+  regressed: 'red',
+  unchanged: 'gray',
+};
 
 /**
  * The latest value for the selected series, its change over the compared period, and a trendline
@@ -82,7 +93,7 @@ export const MetricTrend: FC<MetricTrendProps> = ({
   selectedSeriesId,
   onSeriesChange,
   formatValue = formatPercent,
-  formatDelta = formatSignedDelta,
+  formatDelta = formatTrendDelta,
   chartHeight = DEFAULT_CHART_HEIGHT,
   isPending = false,
   className,
@@ -107,7 +118,7 @@ export const MetricTrend: FC<MetricTrendProps> = ({
   const delta = active?.delta;
   const isNegative = delta !== undefined && delta < 0;
   const isZero = delta === 0;
-  const deltaColor = isZero ? 'gray' : isNegative ? 'red' : 'green';
+  const deltaColor = TAG_COLOR[deltaTone(delta ?? 0)];
   const lineColor = isNegative ? 'var(--text-color-accent-red)' : 'var(--text-color-brand)';
   const colorMode = useNvColorMode();
   const gradient = colorMode === 'dark' ? AREA_GRADIENT.dark : AREA_GRADIENT.light;