@workflow/web-shared 5.0.0-beta.4 → 5.0.0-beta.40

package/src/components/{new-trace-viewer → trace-viewer}/utils.ts

@@ -1,5 +1,9 @@
-import type { Span, SpanEvent } from '../trace-viewer/types';
-import { formatDuration, getHighResInMs } from '../trace-viewer/util/timing';
+import type { Span, SpanEvent } from './types';
+import {
+  formatDuration,
+  formatDurationPrecise,
+  getHighResInMs,
+} from './util/timing';
 
 // ---------------------------------------------------------------------------
 // Root bounds
@@ -37,6 +41,64 @@ export function getSpanDurationMs(span: Span): number {
   );
 }
 
+export function isSpanErrored(span: Span): boolean {
+  const workflowStatus = (span.attributes.data as Record<string, unknown>)
+    ?.status as string | undefined;
+  return span.status.code === 2 || workflowStatus === 'failed';
+}
+
+// ---------------------------------------------------------------------------
+// Viewport
+// ---------------------------------------------------------------------------
+
+export interface ViewportRange {
+  start: number;
+  end: number;
+}
+
+/**
+ * Clamp a candidate viewport to the root extent. The requested duration is
+ * preserved where possible (clamped to [minDurationMs, root duration]), then
+ * the window is shifted back inside the root bounds.
+ */
+export function clampViewportToRoot(
+  next: ViewportRange,
+  rootStart: number,
+  rootEnd: number,
+  minDurationMs: number
+): ViewportRange {
+  const rootDuration = Math.max(rootEnd - rootStart, minDurationMs);
+  const duration = Math.min(
+    rootDuration,
+    Math.max(minDurationMs, next.end - next.start)
+  );
+  const maxStart = rootEnd - duration;
+  const start = Math.min(Math.max(next.start, rootStart), maxStart);
+  return { start, end: start + duration };
+}
+
+// ---------------------------------------------------------------------------
+// Wheel gestures — shared between the timeline and the minimap
+// ---------------------------------------------------------------------------
+
+/** Convert a wheel delta to pixel units (line-mode deltas arrive in lines). */
+export function wheelDeltaToPixels(delta: number, deltaMode: number): number {
+  return deltaMode === 1 ? delta * 16 : delta;
+}
+
+/**
+ * Exponential zoom factor for a wheel gesture. Coarse mouse-wheel steps are
+ * damped harder than trackpad pinches so both feel similar.
+ */
+export function wheelZoomScaleFactor(event: {
+  deltaY: number;
+  deltaMode: number;
+}): number {
+  const dy = wheelDeltaToPixels(event.deltaY, event.deltaMode);
+  const isMouseWheel = event.deltaMode === 1 || Math.abs(event.deltaY) >= 50;
+  return 2 ** (dy / (isMouseWheel ? 200 : 60));
+}
+
 // ---------------------------------------------------------------------------
 // Time markers
 // ---------------------------------------------------------------------------
@@ -56,6 +118,8 @@ const NICE_INTERVALS = [
 
 const MAX_MARKERS = 8;
 
+const MS_IN_SECOND = 1000;
+
 function pickInterval(viewDuration: number, maxTicks: number): number {
   for (const interval of NICE_INTERVALS) {
     if (viewDuration / interval <= maxTicks) return interval;
@@ -72,6 +136,13 @@ export function computeTimeMarkers(
   const maxTicks = 6;
   const interval = pickInterval(viewDuration, maxTicks);
 
+  // Sub-second steps need fractional labels, or ticks past 1s collide as
+  // duplicate whole seconds ("…1s, 2s, 2s, 3s"). Scale decimals to the step.
+  const fractionDigits =
+    interval >= MS_IN_SECOND
+      ? 0
+      : Math.ceil(-Math.log10(interval / MS_IN_SECOND));
+
   const firstTick = Math.ceil(offset / interval) * interval;
   const markers: TimeMarker[] = [];
 
@@ -80,7 +151,10 @@ export function computeTimeMarkers(
     if (position < -0.01 || position > 1.01) continue;
     markers.push({
       position: Math.min(Math.max(position, 0), 1),
-      label: formatDuration(Math.abs(t), true),
+      label:
+        fractionDigits === 0
+          ? formatDuration(Math.abs(t), true)
+          : formatDurationPrecise(Math.abs(t), fractionDigits),
       value: t,
     });
     if (markers.length >= MAX_MARKERS) break;
@@ -100,6 +174,11 @@ export interface SpanGap {
   rowIndex: number;
 }
 
+/** Project an absolute time onto the viewport as a clamped [0, 1] fraction. */
+function toViewportFrac(ms: number, viewStart: number, range: number): number {
+  return Math.min(Math.max((ms - viewStart) / range, 0), 1);
+}
+
 export function computeSpanGaps(
   spans: Span[],
   viewStart: number,
@@ -115,8 +194,8 @@ export function computeSpanGaps(
     const gapMs = startTime - endTime;
     if (gapMs <= 0) continue;
 
-    const leftFrac = Math.min(Math.max((endTime - viewStart) / range, 0), 1);
-    const rightFrac = Math.min(Math.max((startTime - viewStart) / range, 0), 1);
+    const leftFrac = toViewportFrac(endTime, viewStart, range);
+    const rightFrac = toViewportFrac(startTime, viewStart, range);
     if (rightFrac - leftFrac < 0.001) continue;
 
     gaps.push({ gapMs, leftFrac, rightFrac, rowIndex: i });
@@ -124,24 +203,129 @@ export function computeSpanGaps(
   return gaps;
 }
 
+export interface SpanDelta {
+  /** True measured time between the two spans, unaffected by clamping. */
+  deltaMs: number;
+  /** Viewport-clamped fraction of the anchor span's measured edge. */
+  anchorFrac: number;
+  /** Viewport-clamped fraction of the hovered span's measured edge. */
+  hoveredFrac: number;
+  /**
+   * Which edge of the anchor span the measurement runs from: its end when the
+   * spans are disjoint and the anchor comes first, otherwise its start.
+   */
+  anchorEdge: 'start' | 'end';
+  /**
+   * Set when the hovered span lies entirely outside the viewport on one side,
+   * i.e. its row renders an off-screen arrow the line should stop short of.
+   */
+  hoveredOffscreen: 'left' | 'right' | null;
+}
+
+/**
+ * Measure the temporal delta between an anchor (selected) span and a hovered
+ * span for the Alt+hover measurement overlay. Ordering the two spans by start
+ * time (E = earlier-starting, L = later-starting), the measurement runs to
+ * L's start from E's end when the spans are disjoint ("how long after E ended
+ * did L start"), or from E's start when they overlap ("how long after E
+ * started did L start"). Fractions are clamped to the viewport like
+ * `computeSpanGaps`; `deltaMs` is always the true duration. Returns null when
+ * the measurement lies entirely outside the viewport.
+ */
+export function computeSpanDelta(
+  anchor: Span,
+  hovered: Span,
+  viewStart: number,
+  viewEnd: number
+): SpanDelta | null {
+  const range = viewEnd - viewStart;
+  if (range <= 0) return null;
+
+  const anchorStart = getHighResInMs(anchor.startTime);
+  const hoveredStart = getHighResInMs(hovered.startTime);
+  const anchorIsEarlier = anchorStart <= hoveredStart;
+  const earlierStart = anchorIsEarlier ? anchorStart : hoveredStart;
+  const earlierEnd = getHighResInMs(
+    anchorIsEarlier ? anchor.endTime : hovered.endTime
+  );
+  const laterStart = anchorIsEarlier ? hoveredStart : anchorStart;
+
+  const originMs = earlierEnd <= laterStart ? earlierEnd : earlierStart;
+  const deltaMs = laterStart - originMs;
+
+  // Entirely outside the viewport. Compared in time-space (not clamped
+  // fractions) so a zero-delta point sitting exactly on a viewport edge —
+  // e.g. the root span selected at default zoom — still renders.
+  if (laterStart < viewStart || originMs > viewEnd) {
+    return null;
+  }
+
+  const originFrac = toViewportFrac(originMs, viewStart, range);
+  const laterFrac = toViewportFrac(laterStart, viewStart, range);
+
+  const hoveredEnd = getHighResInMs(hovered.endTime);
+
+  return {
+    deltaMs,
+    anchorFrac: anchorIsEarlier ? originFrac : laterFrac,
+    hoveredFrac: anchorIsEarlier ? laterFrac : originFrac,
+    anchorEdge: anchorIsEarlier && earlierEnd <= laterStart ? 'end' : 'start',
+    hoveredOffscreen:
+      hoveredStart > viewEnd ? 'right' : hoveredEnd < viewStart ? 'left' : null,
+  };
+}
+
 // ---------------------------------------------------------------------------
 // Resource colors
 // ---------------------------------------------------------------------------
 
 export const RESOURCE_COLORS: Record<
   string,
-  { bar: string; errorBar?: string }
+  {
+    bg: string;
+    border: string;
+    errorBg?: string;
+    errorBorder?: string;
+  }
 > = {
-  run: { bar: 'var(--ds-blue-700)', errorBar: 'var(--ds-red-700)' },
-  step: { bar: 'var(--ds-green-700)', errorBar: 'var(--ds-red-700)' },
-  hook: { bar: 'var(--ds-amber-700)', errorBar: 'var(--ds-red-700)' },
-  sleep: { bar: 'var(--ds-purple-700)', errorBar: 'var(--ds-red-700)' },
-  default: { bar: 'var(--ds-gray-500)', errorBar: 'var(--ds-red-700)' },
+  run: {
+    bg: 'var(--ds-blue-200)',
+    border: 'var(--ds-blue-500)',
+    errorBg: 'var(--ds-red-200)',
+    errorBorder: 'var(--ds-red-500)',
+  },
+  step: {
+    bg: 'var(--ds-green-200)',
+    border: 'var(--ds-green-500)',
+    errorBg: 'var(--ds-red-200)',
+    errorBorder: 'var(--ds-red-500)',
+  },
+  // Passive spans (hooks) stay gray — matches event-list icons and the minimap.
+  hook: {
+    bg: 'var(--ds-gray-200)',
+    border: 'var(--ds-gray-500)',
+    errorBg: 'var(--ds-red-200)',
+    errorBorder: 'var(--ds-red-500)',
+  },
+  sleep: {
+    bg: 'var(--ds-purple-200)',
+    border: 'var(--ds-purple-500)',
+    errorBg: 'var(--ds-red-200)',
+    errorBorder: 'var(--ds-red-500)',
+  },
+  default: {
+    bg: 'var(--ds-gray-200)',
+    border: 'var(--ds-gray-500)',
+    errorBg: 'var(--ds-red-200)',
+    errorBorder: 'var(--ds-red-500)',
+  },
 };
 
 export function getResourceColor(resource: string): {
-  bar: string;
-  errorBar?: string;
+  bg: string;
+  border: string;
+  errorBg?: string;
+  errorBorder?: string;
 } {
   return RESOURCE_COLORS[resource] ?? RESOURCE_COLORS.default;
 }
@@ -152,7 +336,9 @@ export function getResourceColor(resource: string): {
 
 export type SegmentStatus =
   | 'queued'
+  | 'pending'
   | 'running'
+  | 'completed'
   | 'failed'
   | 'retrying'
   | 'succeeded'
@@ -210,7 +396,7 @@ function computeStepSegmentsFromSpan(
   ]);
 
   if (marks.length === 0) {
-    segments.push({ startFraction: 0, endFraction: 1, status: 'running' });
+    segments.push({ startFraction: 0, endFraction: 1, status: 'queued' });
     return segments;
   }
 
@@ -245,7 +431,7 @@ function computeStepSegmentsFromSpan(
             ? 'failed'
             : nextType === 'step_completed'
               ? 'succeeded'
-              : 'running';
+              : 'retrying';
         segments.push({
           startFraction: markFrac,
           endFraction: nextFrac,
@@ -280,47 +466,20 @@ function computeHookSegmentsFromSpan(
   const segments: Segment[] = [];
   if (duration <= 0) return segments;
 
-  const sorted = [...events]
-    .map((e) => ({ name: e.name, time: getHighResInMs(e.timestamp) }))
-    .sort((a, b) => a.time - b.time);
-
-  const received = sorted.find((e) => e.name === 'hook_received');
-  const disposed = sorted.find((e) => e.name === 'hook_disposed');
-
-  if (!received && !disposed) {
-    segments.push({ startFraction: 0, endFraction: 1, status: 'waiting' });
-    return segments;
-  }
-
-  const receivedFrac = received
-    ? timeToFraction(received.time, startMs, duration)
-    : null;
+  const disposed = sortedEventMarks(events, ['hook_disposed'])[0];
   const disposedFrac = disposed
     ? timeToFraction(disposed.time, startMs, duration)
     : null;
 
-  if (receivedFrac !== null && receivedFrac > 0.001) {
-    segments.push({
-      startFraction: 0,
-      endFraction: receivedFrac,
-      status: 'waiting',
-    });
-  } else if (receivedFrac === null && disposedFrac !== null) {
+  const waitingEnd = disposedFrac ?? 1;
+  if (waitingEnd > 0.001) {
     segments.push({
       startFraction: 0,
-      endFraction: disposedFrac,
+      endFraction: waitingEnd,
       status: 'waiting',
     });
   }
 
-  if (receivedFrac !== null) {
-    segments.push({
-      startFraction: receivedFrac,
-      endFraction: disposedFrac ?? 1,
-      status: 'received',
-    });
-  }
-
   if (disposedFrac !== null && disposedFrac < 0.999) {
     segments.push({
       startFraction: disposedFrac,
@@ -341,6 +500,13 @@ function computeSleepSegmentsFromSpan(
   return [{ startFraction: 0, endFraction: 1, status: 'sleeping' }];
 }
 
+function runSegmentStatus(runStatus: string | undefined): SegmentStatus {
+  if (runStatus === 'failed') return 'failed';
+  if (runStatus === 'pending') return 'pending';
+  if (runStatus === 'running') return 'running';
+  return 'completed';
+}
+
 function computeRunSegmentsFromSpan(
   startMs: number,
   duration: number,
@@ -355,11 +521,12 @@ function computeRunSegmentsFromSpan(
     .map((e) => ({ name: e.name, time: getHighResInMs(e.timestamp) }))
     .sort((a, b) => a.time - b.time);
 
+  const runData = attributes?.data as Record<string, unknown> | undefined;
+  const runStatus = runData?.status as string | undefined;
+
   const hasRunCreated = sorted.some((e) => e.name === 'run_created');
 
   if (!hasRunCreated) {
-    const runData = attributes?.data as Record<string, unknown> | undefined;
-    const runStatus = runData?.status as string | undefined;
     return computeV1RunSegments(startMs, duration, activeStartMs, runStatus);
   }
 
@@ -381,7 +548,7 @@ function computeRunSegmentsFromSpan(
   segments.push({
     startFraction: cursor,
     endFraction: 1,
-    status: failedEvent ? 'failed' : 'running',
+    status: failedEvent ? 'failed' : runSegmentStatus(runStatus),
   });
 
   return segments;
@@ -411,7 +578,7 @@ function computeV1RunSegments(
   segments.push({
     startFraction: cursor,
     endFraction: 1,
-    status: runStatus === 'failed' ? 'failed' : 'running',
+    status: runSegmentStatus(runStatus),
   });
 
   return segments;
@@ -448,3 +615,57 @@ export function computeSpanSegments(span: Span): Segment[] {
       return [];
   }
 }
+
+// ---------------------------------------------------------------------------
+// Span markers — point-in-time events rendered as ticks on top of a bar
+// ---------------------------------------------------------------------------
+
+export interface SpanMarker {
+  timeMs: number;
+}
+
+// `hook_received` = a resumption; `attr_set` = attributes written mid-span.
+const MARKER_EVENT_NAMES = ['hook_received', 'attr_set'];
+
+export function computeSpanMarkers(span: Span): SpanMarker[] {
+  return sortedEventMarks(span.events, MARKER_EVENT_NAMES).map((mark) => ({
+    timeMs: mark.time,
+  }));
+}
+
+export interface OffscreenSide {
+  count: number;
+  /** Nearest off-screen marker — the one a reveal jumps to. */
+  nearestMs: number;
+}
+
+export interface OffscreenMarkers {
+  left: OffscreenSide | null;
+  right: OffscreenSide | null;
+}
+
+/** Partition markers outside `[visibleStartMs, visibleEndMs]` by side. */
+export function computeOffscreenMarkers(
+  markers: SpanMarker[],
+  visibleStartMs: number,
+  visibleEndMs: number
+): OffscreenMarkers {
+  let leftCount = 0;
+  let rightCount = 0;
+  let nearestLeft = Number.NEGATIVE_INFINITY;
+  let nearestRight = Number.POSITIVE_INFINITY;
+  for (const { timeMs } of markers) {
+    if (timeMs < visibleStartMs) {
+      leftCount++;
+      if (timeMs > nearestLeft) nearestLeft = timeMs;
+    } else if (timeMs > visibleEndMs) {
+      rightCount++;
+      if (timeMs < nearestRight) nearestRight = timeMs;
+    }
+  }
+  return {
+    left: leftCount > 0 ? { count: leftCount, nearestMs: nearestLeft } : null,
+    right:
+      rightCount > 0 ? { count: rightCount, nearestMs: nearestRight } : null,
+  };
+}

package/src/components/{trace-viewer-new.tsx → trace-viewer.tsx}

@@ -1,49 +1,55 @@
-import { useMemo } from 'react';
 import type { WorkflowRun } from '@workflow/core/runtime';
 import type { Event } from '@workflow/world';
+import { useMemo } from 'react';
 import { buildTrace, type TraceWithMeta } from '../lib/trace-builder';
-import { NewTraceViewer as NewTraceViewerComponent } from './new-trace-viewer/trace-viewer';
 import {
-  SidebarDataProvider,
   type SidebarDataContextValue,
+  SidebarDataProvider,
 } from './sidebar/sidebar-data-context';
-import type { Trace } from './trace-viewer/types';
+import { TraceViewerSkeleton } from './trace-viewer/components/trace-viewer-skeleton';
+import { TraceViewer as TraceViewerComponent } from './trace-viewer/trace-viewer';
 
-const NewTraceViewer = ({
+const TraceViewer = ({
   run,
   events,
   sidebarData,
+  onLoadMore,
+  hasMore,
+  isLoadingMore,
+  loading = false,
 }: {
   run: WorkflowRun;
   events: Event[];
   sidebarData: SidebarDataContextValue;
+  onLoadMore?: () => void | Promise<void>;
+  hasMore?: boolean;
+  isLoadingMore?: boolean;
+  loading?: boolean;
 }) => {
-  // Build trace only when actual data changes — no timer-driven rebuilds.
-  // Active span widths are animated imperatively by useLiveTick at 60fps.
-  const traceWithMeta: TraceWithMeta | undefined = useMemo(() => {
+  const trace: TraceWithMeta | undefined = useMemo(() => {
     if (!run?.runId) {
       return undefined;
     }
     return buildTrace(run, events, new Date());
-    // eslint-disable-next-line react-hooks/exhaustive-deps -- `new Date()` is intentionally not a dep; useLiveTick handles live growth
+    // eslint-disable-next-line react-hooks/exhaustive-deps -- `new Date()` is intentionally not a dep
   }, [run, events]);
-  const trace = traceWithMeta;
 
-  if (!trace) {
-    return (
-      <div className="relative w-full h-full flex items-center justify-center">
-        <div className="text-gray-500 text-sm">Loading trace…</div>
-      </div>
-    );
+  if (!trace || (loading && events.length === 0)) {
+    return <TraceViewerSkeleton />;
   }
 
   return (
     <SidebarDataProvider value={sidebarData}>
       <div className="relative w-full h-full flex">
-        <NewTraceViewerComponent trace={trace as Trace} />
+        <TraceViewerComponent
+          trace={trace}
+          onLoadMore={onLoadMore}
+          hasMore={hasMore}
+          isLoadingMore={isLoadingMore}
+        />
       </div>
     </SidebarDataProvider>
   );
 };
 
-export { NewTraceViewer };
+export { TraceViewer };

package/src/components/ui/alert.tsx

@@ -1,7 +1,7 @@
 import { cva, type VariantProps } from 'class-variance-authority';
 import * as React from 'react';
 
-import { cn } from '../../lib/utils';
+import { cn } from '../../lib/cn';
 
 const alertVariants = cva(
   'relative w-full rounded-lg border p-4 [&>svg~*]:pl-7 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4',
@@ -50,7 +50,7 @@ const AlertDescription = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <div
     ref={ref}
-    className={cn('text-sm [&_p]:leading-relaxed', className)}
+    className={cn('text-copy-14 [&_p]:leading-relaxed', className)}
     {...props}
   />
 ));

package/src/components/ui/button.tsx

@@ -0,0 +1,68 @@
+import { cva, type VariantProps } from 'class-variance-authority';
+import type * as React from 'react';
+import { cn } from '../../lib/cn';
+
+const buttonVariants = cva(
+  [
+    'outline-none m-0 border-0 align-baseline no-underline group/trigger',
+    'relative cursor-pointer select-none transform translate-z-0',
+    'inline-flex max-w-full items-center justify-center gap-x-1 whitespace-nowrap rounded-md font-medium',
+    '!text-gray-100',
+    'bg-gray-1000',
+    'transition-[border-color,background,color,transform,box-shadow] duration-150 ease-in-out',
+    // Geist invert hover: literal fallbacks (no token dep, so it resolves in any
+    // consuming app), darkened via ancestor theme class without a registered variant.
+    'hover:bg-[var(--themed-hover-bg,_hsl(0,_0%,_22%))]',
+    '[.dark-theme_&]:hover:bg-[var(--themed-hover-bg,_hsl(0,_0%,_80%))]',
+    '[[data-theme=dark]_&]:hover:bg-[var(--themed-hover-bg,_hsl(0,_0%,_80%))]',
+    // Geist focus ring as arbitrary properties (no bare `outline`/ambiguous
+    // arbitrary-color utilities, which differ between Tailwind v3 and v4).
+    'focus-visible:[outline:2px_solid_var(--ds-focus-color)] focus-visible:[outline-offset:2px]',
+    // disabled styles
+    'disabled:cursor-not-allowed aria-disabled:cursor-not-allowed',
+    'disabled:bg-gray-100 disabled:!text-gray-700 disabled:hover:bg-gray-100',
+    'aria-disabled:bg-gray-100 aria-disabled:text-gray-700 aria-disabled:hover:bg-gray-100',
+  ],
+  {
+    variants: {
+      variant: {
+        default: '',
+        secondary:
+          'border border-gray-alpha-400 [--themed-bg:_var(--ds-background-100)] [--themed-fg:_var(--ds-gray-1000)] [--themed-hover-bg:_var(--ds-gray-alpha-200)]',
+        ghost:
+          '[--themed-bg:_transparent] [--themed-fg:_var(--ds-gray-1000)] [--themed-hover-bg:_var(--ds-gray-alpha-100)]',
+      },
+      size: {
+        default: 'h-10 px-4 text-button-14',
+        sm: 'h-8 px-3 text-button-14',
+        xs: 'h-6 px-1.5 py-0.5 text-button-12 rounded-[4px]',
+        icon: 'h-8 w-8',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+      size: 'default',
+    },
+  }
+);
+
+export type ButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement> &
+  VariantProps<typeof buttonVariants>;
+
+export function Button({
+  className,
+  variant,
+  size,
+  type = 'button',
+  ...props
+}: ButtonProps) {
+  return (
+    <button
+      type={type}
+      className={cn(buttonVariants({ variant, size, className }))}
+      {...props}
+    />
+  );
+}
+
+export { buttonVariants };

package/src/components/ui/card.tsx

@@ -2,7 +2,7 @@
 
 import * as React from 'react';
 
-import { cn } from '../../lib/utils';
+import { cn } from '../../lib/cn';
 
 const Card = React.forwardRef<
   HTMLDivElement,
@@ -32,14 +32,7 @@ const CardTitle = React.forwardRef<
   HTMLDivElement,
   React.HTMLAttributes<HTMLDivElement>
 >(({ className, ...props }, ref) => (
-  <div
-    ref={ref}
-    className={cn(
-      'text-2xl font-semibold leading-none tracking-tight',
-      className
-    )}
-    {...props}
-  />
+  <div ref={ref} className={cn('text-heading-24', className)} {...props} />
 ));
 CardTitle.displayName = 'CardTitle';
 
@@ -49,7 +42,7 @@ const CardDescription = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <div
     ref={ref}
-    className={cn('text-sm', className)}
+    className={cn('text-copy-14', className)}
     style={{ color: 'var(--ds-gray-900)' }}
     {...props}
   />