@workflow/web-shared 5.0.0-beta.41 → 5.0.0-beta.42

package/src/components/sidebar/resolve-hook-modal.tsx

@@ -2,6 +2,7 @@
 
 import { Send, X } from 'lucide-react';
 import { useCallback, useEffect, useRef, useState } from 'react';
+import { cn } from '../../lib/cn';
 
 interface ResolveHookModalProps {
   /** Whether the modal is open */
@@ -110,60 +111,24 @@ export function ResolveHookModal({
 
   return (
     <div
-      style={{
-        position: 'fixed',
-        inset: 0,
-        zIndex: 50,
-        display: 'flex',
-        alignItems: 'center',
-        justifyContent: 'center',
-      }}
+      className="fixed inset-0 z-50 flex items-center justify-center"
       role="dialog"
       aria-modal="true"
       aria-labelledby="resolve-hook-modal-title"
     >
       {/* Backdrop — matches Geist dialog ::backdrop */}
       <div
-        style={{
-          position: 'absolute',
-          inset: 0,
-          background: 'rgba(0, 0, 0, 0.7)',
-        }}
+        className="absolute inset-0 bg-black/70"
         onClick={isSubmitting ? undefined : onClose}
       />
 
       {/* Modal card — matches Geist dialog.geist-dialog */}
-      <div
-        style={{
-          position: 'relative',
-          zIndex: 10,
-          width: 480,
-          maxWidth: 'calc(100% - 32px)',
-          borderRadius: 12,
-          border: 'none',
-          boxShadow: 'var(--ds-shadow-menu)',
-          background: 'var(--ds-background-100)',
-          color: 'var(--ds-gray-1000)',
-          overflow: 'hidden',
-        }}
-      >
+      <div className="relative z-10 w-[480px] max-w-[calc(100%_-_32px)] overflow-hidden !border-none bg-background-100 text-gray-1000 material-menu">
         {/* Header */}
-        <div
-          style={{
-            display: 'flex',
-            alignItems: 'center',
-            justifyContent: 'space-between',
-            padding: '16px 24px',
-          }}
-        >
+        <div className="flex items-center justify-between px-6 py-4">
           <h2
             id="resolve-hook-modal-title"
-            style={{
-              margin: 0,
-              fontSize: 16,
-              fontWeight: 600,
-              color: 'var(--ds-gray-1000)',
-            }}
+            className="m-0 font-semibold text-base text-gray-1000"
           >
             Resolve Hook
           </h2>
@@ -172,66 +137,24 @@ export function ResolveHookModal({
             onClick={onClose}
             disabled={isSubmitting}
             aria-label="Close modal"
-            style={{
-              display: 'flex',
-              alignItems: 'center',
-              justifyContent: 'center',
-              padding: 4,
-              borderRadius: 6,
-              border: 'none',
-              background: 'transparent',
-              color: 'var(--ds-gray-900)',
-              cursor: isSubmitting ? 'not-allowed' : 'pointer',
-              opacity: isSubmitting ? 0.5 : 1,
-              transition: 'background 0.15s',
-            }}
-            onMouseEnter={(e) => {
-              e.currentTarget.style.background = 'var(--ds-gray-alpha-200)';
-            }}
-            onMouseLeave={(e) => {
-              e.currentTarget.style.background = 'transparent';
-            }}
+            className="flex cursor-pointer items-center justify-center rounded-md !border-none !bg-transparent p-1 text-gray-900 transition-colors hover:!bg-gray-alpha-200 disabled:cursor-not-allowed disabled:opacity-50"
           >
-            <X style={{ width: 16, height: 16 }} />
+            <X className="size-4" />
           </button>
         </div>
 
         {/* Body */}
         <form onSubmit={handleSubmit}>
-          <div style={{ padding: '0 24px 16px' }}>
+          <div className="px-6 pb-4">
             <label
               htmlFor="json-payload"
-              style={{
-                display: 'block',
-                fontSize: 14,
-                fontWeight: 500,
-                marginBottom: 6,
-                color: 'var(--ds-gray-1000)',
-              }}
+              className="mb-1.5 block font-medium text-gray-1000 text-sm"
             >
               JSON Payload
             </label>
-            <p
-              style={{
-                fontSize: 13,
-                marginBottom: 12,
-                marginTop: 0,
-                color: 'var(--ds-gray-900)',
-                lineHeight: 1.5,
-              }}
-            >
+            <p className="mt-0 mb-3 text-[13px] text-gray-900 leading-[1.5]">
               Enter a JSON value to send to the hook. Leave empty to send{' '}
-              <code
-                style={{
-                  padding: '2px 6px',
-                  borderRadius: 4,
-                  fontSize: 12,
-                  fontFamily:
-                    'var(--font-mono, ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace)',
-                  background: 'var(--ds-gray-alpha-200)',
-                  color: 'var(--ds-gray-1000)',
-                }}
-              >
+              <code className="rounded bg-gray-alpha-200 px-1.5 py-0.5 font-mono text-gray-1000 text-xs">
                 null
               </code>
               .
@@ -247,57 +170,17 @@ export function ResolveHookModal({
               onKeyDown={handleKeyDown}
               disabled={isSubmitting}
               placeholder='{"key": "value"}'
-              style={{
-                width: '100%',
-                height: 160,
-                padding: '8px 12px',
-                fontFamily:
-                  'var(--font-mono, ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace)',
-                fontSize: 13,
-                lineHeight: 1.5,
-                borderRadius: 8,
-                border: `1px solid ${parseError ? 'var(--ds-red-700)' : 'var(--ds-gray-alpha-400)'}`,
-                color: 'var(--ds-gray-1000)',
-                background: 'var(--ds-background-100)',
-                outline: 'none',
-                resize: 'none',
-                opacity: isSubmitting ? 0.5 : 1,
-                cursor: isSubmitting ? 'not-allowed' : 'text',
-                boxSizing: 'border-box',
-              }}
+              className={cn(
+                'box-border h-40 w-full resize-none rounded-lg border bg-background-100 px-3 py-2 font-mono text-[13px] text-gray-1000 leading-[1.5] outline-none disabled:cursor-not-allowed disabled:opacity-50',
+                parseError ? 'border-red-700' : 'border-gray-alpha-400'
+              )}
             />
             {parseError && (
-              <p
-                style={{
-                  marginTop: 8,
-                  fontSize: 13,
-                  color: 'var(--ds-red-900)',
-                  margin: '8px 0 0',
-                }}
-              >
-                {parseError}
-              </p>
+              <p className="mt-2 mb-0 text-[13px] text-red-900">{parseError}</p>
             )}
-            <p
-              style={{
-                marginTop: 8,
-                fontSize: 12,
-                color: 'var(--ds-gray-800)',
-                margin: '8px 0 0',
-              }}
-            >
+            <p className="mt-2 mb-0 text-gray-800 text-xs">
               Press{' '}
-              <kbd
-                style={{
-                  padding: '2px 5px',
-                  borderRadius: 4,
-                  fontSize: 11,
-                  fontFamily:
-                    'var(--font-mono, ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace)',
-                  background: 'var(--ds-gray-alpha-200)',
-                  border: '1px solid var(--ds-gray-alpha-400)',
-                }}
-              >
+              <kbd className="rounded border border-gray-alpha-400 bg-gray-alpha-200 px-[5px] py-0.5 font-mono text-[11px]">
                 {isMacPlatform ? '⌘' : 'Ctrl'}
                 +Enter
               </kbd>{' '}
@@ -306,38 +189,12 @@ export function ResolveHookModal({
           </div>
 
           {/* Footer */}
-          <div
-            style={{
-              display: 'flex',
-              alignItems: 'center',
-              justifyContent: 'flex-end',
-              gap: 8,
-              padding: '12px 24px',
-              borderTop: '1px solid var(--ds-gray-alpha-400)',
-            }}
-          >
+          <div className="flex items-center justify-end gap-2 border-gray-alpha-400 border-t px-6 py-3">
             <button
               type="button"
               onClick={onClose}
               disabled={isSubmitting}
-              style={{
-                padding: '8px 16px',
-                fontSize: 14,
-                fontWeight: 500,
-                borderRadius: 8,
-                border: '1px solid var(--ds-gray-alpha-400)',
-                background: 'var(--ds-background-100)',
-                color: 'var(--ds-gray-1000)',
-                cursor: isSubmitting ? 'not-allowed' : 'pointer',
-                opacity: isSubmitting ? 0.5 : 1,
-                transition: 'background 0.15s',
-              }}
-              onMouseEnter={(e) => {
-                e.currentTarget.style.background = 'var(--ds-gray-alpha-100)';
-              }}
-              onMouseLeave={(e) => {
-                e.currentTarget.style.background = 'var(--ds-background-100)';
-              }}
+              className="cursor-pointer rounded-lg border border-gray-alpha-400 bg-background-100 px-4 py-2 font-medium text-gray-1000 text-sm transition-colors hover:bg-gray-alpha-100 disabled:cursor-not-allowed disabled:opacity-50"
             >
               Cancel
             </button>
@@ -345,29 +202,9 @@ export function ResolveHookModal({
               type="button"
               onClick={() => void submitPayload()}
               disabled={isSubmitting}
-              style={{
-                display: 'flex',
-                alignItems: 'center',
-                gap: 6,
-                padding: '8px 16px',
-                fontSize: 14,
-                fontWeight: 500,
-                borderRadius: 8,
-                border: 'none',
-                background: 'var(--ds-gray-1000)',
-                color: 'var(--ds-background-100)',
-                cursor: isSubmitting ? 'not-allowed' : 'pointer',
-                opacity: isSubmitting ? 0.5 : 1,
-                transition: 'opacity 0.15s',
-              }}
-              onMouseEnter={(e) => {
-                if (!isSubmitting) e.currentTarget.style.opacity = '0.9';
-              }}
-              onMouseLeave={(e) => {
-                if (!isSubmitting) e.currentTarget.style.opacity = '1';
-              }}
+              className="flex cursor-pointer items-center gap-1.5 rounded-lg !border-none bg-gray-1000 px-4 py-2 font-medium text-background-100 text-sm transition-opacity hover:opacity-90 disabled:cursor-not-allowed disabled:opacity-50 disabled:hover:opacity-50"
             >
-              <Send style={{ width: 14, height: 14 }} />
+              <Send className="size-3.5" />
               {isSubmitting ? 'Sending...' : 'Send Payload'}
             </button>
           </div>

package/src/components/sidebar/sidebar-data-context.tsx

@@ -7,6 +7,12 @@ import type { FetchSpanDetail } from './use-selected-span-detail';
 export interface SidebarDataContextValue {
   run: WorkflowRun;
   events: Event[];
+  /**
+   * Events every replay reads past as repeats, computed once from the whole
+   * of `events` by whoever knows the list is complete. Absent when nobody
+   * could vouch for that, in which case nothing is marked.
+   */
+  duplicateEventIds?: ReadonlySet<string>;
   fetchSpanDetail: FetchSpanDetail;
   onStreamClick?: (streamId: string) => void;
   onRunClick?: (runId: string) => void;

package/src/components/stream-viewer-skeleton.tsx

@@ -1,10 +1,10 @@
 import { Skeleton } from './ui/skeleton';
 
 const STREAM_SKELETON_ROWS = [
-  { id: 'stream-skeleton-row-1', width: '72%' },
-  { id: 'stream-skeleton-row-2', width: '58%' },
-  { id: 'stream-skeleton-row-3', width: '80%' },
-  { id: 'stream-skeleton-row-4', width: '64%' },
+  { id: 'stream-skeleton-row-1', widthClassName: 'w-[72%]' },
+  { id: 'stream-skeleton-row-2', widthClassName: 'w-[58%]' },
+  { id: 'stream-skeleton-row-3', widthClassName: 'w-4/5' },
+  { id: 'stream-skeleton-row-4', widthClassName: 'w-[64%]' },
 ];
 
 export function StreamViewerSkeleton() {
@@ -24,7 +24,7 @@ export function StreamViewerSkeleton() {
             key={row.id}
             className="flex h-10 items-center gap-2 border-b border-gray-alpha-400 px-3"
           >
-            <Skeleton className="h-3" style={{ width: row.width }} />
+            <Skeleton className={`h-3 ${row.widthClassName}`} />
             <Skeleton className="h-4 w-4 shrink-0 rounded-sm" />
           </div>
         ))}

package/src/components/stream-viewer.tsx

@@ -122,7 +122,7 @@ export function StreamViewer({
                 <ChunkRow chunk={chunks[index]} />
               </div>
             )}
-            style={{ flex: 1, minHeight: 0 }}
+            className="min-h-0 flex-1"
           />
         )}
       </div>

package/src/components/trace-viewer/components/detail-panel.tsx

@@ -55,6 +55,7 @@ function useSelectedSpanInfo(): SelectedSpanInfo | null {
       resource,
       spanId: activeSpan.spanId,
       rawEvents,
+      duplicateEventIds: sidebar.duplicateEventIds,
     };
   }, [activeSpan, sidebar]);
 }

package/src/components/trace-viewer/components/timeline.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import { ArrowLeft, ArrowRight } from 'lucide-react';
-import type { CSSProperties, ReactNode } from 'react';
+import type { ReactNode } from 'react';
 import {
   Fragment,
   memo,
@@ -28,7 +28,7 @@ import {
   computeSpanGaps,
   computeSpanMarkers,
   computeSpanSegments,
-  getResourceColor,
+  getResourceClassNames,
   getSpanDurationMs,
   isSpanErrored,
 } from '../utils';
@@ -62,11 +62,6 @@ const SEGMENT_CLASSES: Record<SegmentStatus, string> = {
   received: 'bg-blue-200 border border-blue-500',
 };
 
-const TIMELINE_INSET_STYLE: CSSProperties = {
-  left: TIMELINE_PADDING_PX,
-  right: TIMELINE_PADDING_PX,
-};
-
 const STRIPED_SEGMENT_STATUSES: ReadonlySet<SegmentStatus> = new Set([
   'pending',
   'running',
@@ -260,18 +255,18 @@ function BoundaryArrow({
 }
 
 function PlainBar({
-  bg,
-  border,
+  className,
   label,
 }: {
-  bg: string;
-  border: string;
+  className: string;
   label: string | null;
 }): ReactNode {
   return (
     <div
-      className="relative h-6 w-full min-w-1 rounded-[0.25rem] border"
-      style={{ background: bg, borderColor: border }}
+      className={cn(
+        'relative h-6 w-full min-w-1 rounded-[0.25rem] border',
+        className
+      )}
     >
       {label ? <DurationLabel label={label} /> : null}
     </div>
@@ -352,14 +347,13 @@ function SegmentBar({
           <div
             key={i}
             className={cn(
-              'absolute h-full overflow-hidden rounded-[0.25rem]',
+              'absolute h-full min-w-px overflow-hidden rounded-[0.25rem]',
               SEGMENT_CLASSES[seg.status]
             )}
             style={{
               // 1px gap between adjacent segments, distributed equally.
               left: `calc(${seg.leftPct}% + 0.5px)`,
               width: `calc(${seg.widthPct}% - 1px)`,
-              minWidth: 1,
             }}
           >
             {STRIPED_SEGMENT_STATUSES.has(seg.status) ? (
@@ -457,13 +451,10 @@ const TimelineBar = memo(function TimelineBar({
     markers.length > 0 || offscreen.left !== null || offscreen.right !== null;
 
   const isErrored = isSpanErrored(span);
-  const colors = getResourceColor(span.resource);
-  const fallbackBg = isErrored
-    ? (colors.errorBg ?? 'var(--ds-red-200)')
-    : colors.bg;
-  const fallbackBorder = isErrored
-    ? (colors.errorBorder ?? 'var(--ds-red-500)')
-    : colors.border;
+  const colors = getResourceClassNames(span.resource);
+  const fallbackClassName = isErrored
+    ? (colors.errorClassName ?? 'border-red-500 bg-red-200')
+    : colors.className;
 
   const totalLabel = formatDurationPrecise(totalDurationMs);
   const showTotalLabel =
@@ -486,7 +477,7 @@ const TimelineBar = memo(function TimelineBar({
       )}
       onClick={handleClick}
     >
-      <div className="absolute inset-y-0" style={TIMELINE_INSET_STYLE}>
+      <div className="absolute inset-x-4 inset-y-0">
         <div
           className="absolute top-1/2 h-6 -translate-y-1/2 overflow-hidden rounded-[0.25rem]"
           style={getBarPositionStyle(geometry)}
@@ -495,15 +486,13 @@ const TimelineBar = memo(function TimelineBar({
             <BoundaryArrow direction={geometry.mode.direction} />
           ) : geometry.mode.kind === 'tiny' ? (
             <div
-              className="h-6 rounded-[0.25rem] border"
-              style={{ background: fallbackBg, borderColor: fallbackBorder }}
+              className={cn('h-6 rounded-[0.25rem] border', fallbackClassName)}
             />
           ) : segments.length > 0 ? (
             <SegmentBar segments={segments} showLabels={!hasMarkers} />
           ) : (
             <PlainBar
-              bg={fallbackBg}
-              border={fallbackBorder}
+              className={fallbackClassName}
               label={showTotalLabel ? totalLabel : null}
             />
           )}
@@ -612,10 +601,9 @@ const DeltaMeasureLine = memo(function DeltaMeasureLine({
   return (
     <>
       <div
-        className="absolute h-px bg-amber-800"
+        className="absolute h-px w-1 bg-amber-800"
         style={{
           left: Math.min(anchorX, guideX),
-          width: MEASURE_GUIDE_OUTSET_PX,
           top: anchorCenterY,
         }}
       />
@@ -781,8 +769,7 @@ export function Timeline({
     >
       <div
         aria-hidden
-        className="absolute inset-y-0 pointer-events-none"
-        style={TIMELINE_INSET_STYLE}
+        className="pointer-events-none absolute inset-x-4 inset-y-0"
       >
         {markers.map((marker) =>
           // Skip the "0s" origin marker since the left edge already implies it.
@@ -796,10 +783,7 @@ export function Timeline({
         )}
       </div>
       {hover != null && (
-        <div
-          className="absolute inset-y-0 pointer-events-none z-10"
-          style={TIMELINE_INSET_STYLE}
-        >
+        <div className="pointer-events-none absolute inset-x-4 inset-y-0 z-10">
           <div
             className="absolute top-0 bottom-0 w-px bg-gray-alpha-500"
             style={{ left: `${hover.fraction * 100}%` }}
@@ -824,8 +808,7 @@ export function Timeline({
       {altHeld && anchorIndex < 0 && (
         <div
           aria-hidden
-          className="absolute inset-y-0 pointer-events-none"
-          style={TIMELINE_INSET_STYLE}
+          className="pointer-events-none absolute inset-x-4 inset-y-0"
         >
           {gapMeasurements.map((gap) => (
             <DeltaMeasureLine
@@ -839,8 +822,7 @@ export function Timeline({
       {measurement && (
         <div
           aria-hidden
-          className="absolute inset-y-0 pointer-events-none z-20"
-          style={TIMELINE_INSET_STYLE}
+          className="pointer-events-none absolute inset-x-4 inset-y-0 z-20"
         >
           <DeltaMeasureLine {...measurement} timelineWidth={timelineWidth} />
         </div>

package/src/components/trace-viewer/components/trace-viewer-skeleton.tsx

@@ -1,19 +1,62 @@
 import { Skeleton } from '../../ui/skeleton';
-import { DEFAULT_START_PX, paneColTemplate } from './pane-constants';
 
-// Mirrors SplitPane's initial column template so the skeleton lines up with
-// the real viewer's first paint.
-const COL_TEMPLATE = paneColTemplate(DEFAULT_START_PX);
-
-const ROWS: { id: string; name: number; off: number; bar: number }[] = [
-  { id: 'r0', name: 62, off: 0, bar: 72 },
-  { id: 'r1', name: 78, off: 6, bar: 48 },
-  { id: 'r2', name: 50, off: 10, bar: 55 },
-  { id: 'r3', name: 84, off: 18, bar: 30 },
-  { id: 'r4', name: 45, off: 18, bar: 42 },
-  { id: 'r5', name: 66, off: 34, bar: 38 },
-  { id: 'r6', name: 55, off: 41, bar: 25 },
-  { id: 'r7', name: 40, off: 50, bar: 30 },
+const ROWS = [
+  {
+    id: 'r0',
+    nameClassName: 'w-[62%]',
+    offsetClassName: 'left-0',
+    barClassName: 'w-[72%]',
+    topClassName: 'top-0',
+  },
+  {
+    id: 'r1',
+    nameClassName: 'w-[78%]',
+    offsetClassName: 'left-[6%]',
+    barClassName: 'w-[48%]',
+    topClassName: 'top-[3.5px]',
+  },
+  {
+    id: 'r2',
+    nameClassName: 'w-1/2',
+    offsetClassName: 'left-[10%]',
+    barClassName: 'w-[55%]',
+    topClassName: 'top-[7px]',
+  },
+  {
+    id: 'r3',
+    nameClassName: 'w-[84%]',
+    offsetClassName: 'left-[18%]',
+    barClassName: 'w-[30%]',
+    topClassName: 'top-[10.5px]',
+  },
+  {
+    id: 'r4',
+    nameClassName: 'w-[45%]',
+    offsetClassName: 'left-[18%]',
+    barClassName: 'w-[42%]',
+    topClassName: 'top-[14px]',
+  },
+  {
+    id: 'r5',
+    nameClassName: 'w-[66%]',
+    offsetClassName: 'left-[34%]',
+    barClassName: 'w-[38%]',
+    topClassName: 'top-[17.5px]',
+  },
+  {
+    id: 'r6',
+    nameClassName: 'w-[55%]',
+    offsetClassName: 'left-[41%]',
+    barClassName: 'w-1/4',
+    topClassName: 'top-[21px]',
+  },
+  {
+    id: 'r7',
+    nameClassName: 'w-2/5',
+    offsetClassName: 'left-1/2',
+    barClassName: 'w-[30%]',
+    topClassName: 'top-[24.5px]',
+  },
 ];
 
 const HEADER_MARKERS = ['m0', 'm1', 'm2', 'm3'];
@@ -36,25 +79,17 @@ export function TraceViewerSkeleton() {
       {/* Minimap strip: thin density lines tracing the same shape as the bars */}
       <div className="relative h-10 min-h-10 shrink-0 border-b border-gray-alpha-400">
         <div className="absolute inset-x-4 top-[6px]">
-          {ROWS.map((row, index) => (
+          {ROWS.map((row) => (
             <Skeleton
               key={row.id}
-              className="absolute h-[3px] rounded-full"
-              style={{
-                left: `${row.off}%`,
-                width: `${row.bar}%`,
-                top: index * 3.5,
-              }}
+              className={`absolute h-[3px] rounded-full ${row.offsetClassName} ${row.barClassName} ${row.topClassName}`}
             />
           ))}
         </div>
       </div>
 
       {/* Header row: search header | divider | timeline header */}
-      <div
-        className="shrink-0 grid"
-        style={{ gridTemplateColumns: COL_TEMPLATE }}
-      >
+      <div className="grid shrink-0 grid-cols-[340px_1px_minmax(50px,1fr)]">
         <div className="h-10 min-h-10 flex items-center border-b border-gray-alpha-400 pl-4 pr-2 gap-1.5">
           <Skeleton className="w-3.5 h-3.5 shrink-0 rounded-sm" />
           <Skeleton className="h-3.5 w-40" />
@@ -70,10 +105,7 @@ export function TraceViewerSkeleton() {
       </div>
 
       {/* Content row: event list | gutter | timeline */}
-      <div
-        className="grid flex-1 min-h-0 overflow-hidden"
-        style={{ gridTemplateColumns: COL_TEMPLATE }}
-      >
+      <div className="grid min-h-0 flex-1 grid-cols-[340px_1px_minmax(50px,1fr)] overflow-hidden">
         {/* Sidebar event rows */}
         <div className="block overflow-visible">
           <ul className="block divide-y divide-gray-alpha-400 border-b border-gray-alpha-400">
@@ -81,10 +113,7 @@ export function TraceViewerSkeleton() {
               <li key={row.id} className="h-10 flex items-center pl-4 pr-2">
                 <div className="flex min-w-0 flex-1 items-center gap-2">
                   <Skeleton className="w-4 h-4 shrink-0 rounded-sm" />
-                  <Skeleton
-                    className="h-3.5"
-                    style={{ width: `${row.name}%` }}
-                  />
+                  <Skeleton className={`h-3.5 ${row.nameClassName}`} />
                 </div>
                 <Skeleton className="ml-2 h-3.5 w-10 shrink-0" />
               </li>
@@ -101,8 +130,7 @@ export function TraceViewerSkeleton() {
             <div key={row.id} className="relative h-10">
               <div className="absolute inset-x-4 inset-y-0">
                 <Skeleton
-                  className="absolute top-1/2 -translate-y-1/2 h-6 rounded-[0.25rem]"
-                  style={{ left: `${row.off}%`, width: `${row.bar}%` }}
+                  className={`absolute top-1/2 h-6 -translate-y-1/2 rounded-[0.25rem] ${row.offsetClassName} ${row.barClassName}`}
                 />
               </div>
             </div>