@workflow/web-shared 5.0.0-beta.37 → 5.0.0-beta.39

package/src/components/trace-viewer/types.ts

@@ -1,234 +1,2 @@
-import type { MutableRefObject, ReactNode } from 'react';
-
-export type MemoCacheKey = Record<string, never>;
-export type MemoCache = Map<string, MemoCacheKey>;
-
-export interface Span {
-  name: string;
-  kind: number;
-  resource: string;
-  library: {
-    name: string;
-    version?: string;
-  };
-  spanId: string;
-  parentSpanId?: string;
-  status: {
-    code: number;
-  };
-  traceFlags: number;
-  attributes: Record<string, unknown>;
-  links: Record<string, unknown>[];
-  events: SpanEvent[];
-  startTime: [number, number];
-  endTime: [number, number];
-  duration: [number, number];
-  /**
-   * The time when the span became active/started executing (optional).
-   * If provided and different from startTime, the portion between startTime
-   * and activeStartTime will be rendered as a "queued" period with different styling.
-   */
-  activeStartTime?: [number, number];
-}
-
-export interface SpanEvent {
-  name: string;
-  timestamp: [number, number];
-  attributes: Record<string, unknown>;
-  /**
-   * Optional custom color for this event marker (workflow-specific feature).
-   * If provided, this color will be used for the event marker line/diamond.
-   */
-  color?: string;
-  /**
-   * Whether to show a vertical line for this event in the timeline (workflow-specific feature).
-   * If false, only the diamond marker on the span will be shown.
-   * Defaults to true if not specified.
-   */
-  showVerticalLine?: boolean;
-}
-
-export interface Resource {
-  name: string;
-  attributes: Record<string, string>;
-}
-
-export interface Trace {
-  traceId: string;
-  resources?: Resource[];
-  spans: Span[];
-  rootSpanId?: string;
-}
-
-interface EveryNode {
-  startTime: number;
-  endTime: number;
-  duration: number;
-  /**
-   * How deep is this node within the tree
-   */
-  depth: number;
-  /**
-   * All direct child nodes of this node
-   */
-  children: SpanNode[];
-}
-
-export interface RootNode extends EveryNode {
-  /**
-   * The depth is always 0 for the root node
-   */
-  depth: 0;
-}
-
-export interface SpanNode extends EveryNode {
-  /**
-   * This original Span that this node is based on
-   */
-  span: Span;
-  /**
-   * The immediate parent of this node
-   */
-  parent: RootNode | SpanNode;
-  /**
-   * A generated label to use (overrides the span.name) if present
-   */
-  label?: string;
-  /**
-   * OTEL events that are present on this span (e.g. TTFB)
-   */
-  events?: SpanNodeEvent[];
-  /**
-   * Whether this span originated in Vercel's infrastructure.
-   */
-  isVercel: boolean;
-  /**
-   * Whether this span matches the current search filter
-   */
-  isHighlighted?: boolean;
-  /**
-   * Whether this span is a placeholder to hint at where user spans
-   * would appear if proper instrumentation were available
-   */
-  isInstrumentationHint?: boolean;
-  /**
-   * The index of the resource that this node belongs to (used for color)
-   */
-  resourceIndex: number;
-  /**
-   * The time when execution actually started (in milliseconds).
-   * If present and greater than startTime, represents a "queued" period.
-   */
-  activeStartTime?: number;
-}
-
-export interface SpanNodeEvent {
-  /** A unique key for this event to help with rendering in React */
-  key: string;
-  /** The timestamp of this event in milliseconds */
-  timestamp: number;
-  /** The original event model */
-  event: SpanEvent;
-}
-
-export type TraceNode = RootNode | SpanNode;
-
-export interface VisibleSpan extends SpanNode {
-  /**
-   * The ref for this span's element in the DOM
-   */
-  ref?: MutableRefObject<HTMLButtonElement | null>;
-  /**
-   * The y position of this span (in # of rows)
-   */
-  row: number;
-  /**
-   * Whether the CursorMarker is intersecting this span
-   */
-  isHovered: boolean;
-  /**
-   * Whether this is the selected span
-   */
-  isSelected: boolean;
-  /**
-   * Whether this node is visible (based on its size on screen)
-   */
-  isVisible: boolean;
-  /**
-   * Events also need to be able to hold a ref to their element in the DOM
-   */
-  events?: VisibleSpanEvent[];
-}
-
-export interface VisibleSpanEvent extends SpanNodeEvent {
-  /**
-   * The ref for this span's element in the DOM
-   */
-  ref?: MutableRefObject<HTMLDivElement | null>;
-  /**
-   * Whether the CursorMarker is intersecting this span
-   */
-  isHovered: boolean;
-}
-
-export interface ScrollSnapshot {
-  anchorT: number;
-  anchorX: number;
-  scrollLeft: number;
-  scrollTop: number;
-  startTime: number;
-  endTime: number;
-  startRow: number;
-  endRow: number;
-  scale: number;
-}
-
-export type WorkerRequest = {
-  requestId: number;
-} & (
-  | {
-      type: 'calculateSpanPositions';
-      root: RootNode;
-    }
-  | {
-      type: 'filterSpans';
-      root: RootNode;
-      filter: string;
-    }
-);
-
-export type WorkerResponse = {
-  requestId: number;
-} & (
-  | {
-      type: 'setRowsResult';
-      rows: VisibleSpan[][];
-      isEnd: boolean;
-    }
-  | {
-      type: 'updateHighlight';
-      matches: Set<string>;
-    }
-);
-
-/**
- * Represents one link to a page related to the selected
- * span in the detail panel.
- */
-export interface QuickLink {
-  /** Used as a React key and the user-facing name for the link */
-  key: string;
-  /** Until this Promise is fulfilled, the row will render with a skeleton for the value. */
-  value: Promise<QuickLinkValue>;
-}
-
-export interface QuickLinkValue {
-  /** The visible components for the right side of this link */
-  label: ReactNode;
-  /** A special suffix to show for this link, defaults to the ExternalLink icon */
-  icon?: ReactNode;
-  /** The href that this link will open when clicked */
-  href: string;
-}
-
-export type GetQuickLinks = (node: Span) => QuickLink[];
+export type { TraceWithMeta } from '../../lib/trace-builder';
+export type { Span, SpanEvent, Trace } from '../../lib/trace-types';

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

@@ -1,9 +1,9 @@
+import type { Span, SpanEvent } from './types';
 import {
   formatDuration,
   formatDurationPrecise,
   getHighResInMs,
-} from '../trace-viewer/util/timing';
-import type { Span, SpanEvent } from './types';
+} from './util/timing';
 
 // ---------------------------------------------------------------------------
 // Root bounds

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

@@ -2,14 +2,14 @@ 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 { TraceViewerSkeleton } from './new-trace-viewer/components/trace-viewer-skeleton';
-import { NewTraceViewer as NewTraceViewerComponent } from './new-trace-viewer/trace-viewer';
 import {
   type SidebarDataContextValue,
   SidebarDataProvider,
 } from './sidebar/sidebar-data-context';
+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,
@@ -41,7 +41,7 @@ const NewTraceViewer = ({
   return (
     <SidebarDataProvider value={sidebarData}>
       <div className="relative w-full h-full flex">
-        <NewTraceViewerComponent
+        <TraceViewerComponent
           trace={trace}
           onLoadMore={onLoadMore}
           hasMore={hasMore}
@@ -52,4 +52,4 @@ const NewTraceViewer = ({
   );
 };
 
-export { NewTraceViewer };
+export { TraceViewer };

package/src/components/ui/alert.tsx

@@ -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

@@ -1,5 +1,5 @@
-import * as React from 'react';
 import { cva, type VariantProps } from 'class-variance-authority';
+import type * as React from 'react';
 import { cn } from '../../lib/cn';
 
 const buttonVariants = cva(
@@ -33,8 +33,8 @@ const buttonVariants = cva(
           '[--themed-bg:_transparent] [--themed-fg:_var(--ds-gray-1000)] [--themed-hover-bg:_var(--ds-gray-alpha-100)]',
       },
       size: {
-        default: 'h-10 px-4 text-[14px]',
-        sm: 'h-8 px-3 text-[14px]',
+        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',
       },

package/src/components/ui/card.tsx

@@ -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}
   />

package/src/components/ui/error-card.tsx

@@ -41,10 +41,10 @@ export function ErrorCard({
         >
           <div className="flex items-center gap-2">
             <AlertCircle className="h-4 w-4 shrink-0" />
-            <span className="font-medium text-sm">{title}</span>
+            <span className="font-medium text-label-14">{title}</span>
           </div>
           <div className="flex items-center gap-1.5 opacity-70">
-            <span className="text-xs">Click to show details</span>
+            <span className="text-label-12">Click to show details</span>
             <ChevronDown
               className={cn(
                 'h-4 w-4 transition-transform duration-200',
@@ -60,7 +60,7 @@ export function ErrorCard({
             style={{ borderTop: '1px solid var(--ds-red-400)' }}
           >
             <pre
-              className="mt-3 p-3 rounded-md text-xs font-mono whitespace-pre-wrap break-words overflow-auto"
+              className="mt-3 p-3 rounded-md text-label-12-mono whitespace-pre-wrap break-words overflow-auto"
               style={{
                 background: 'var(--ds-red-200)',
                 color: 'var(--ds-red-900)',

package/src/components/ui/error-stack-block.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import { AlertCircle } from 'lucide-react';
-import { CopyButton } from '../new-trace-viewer/components/copy-button';
+import { CopyButton } from '../trace-viewer/components/copy-button';
 
 export type StructuredErrorRecord = Record<string, unknown> & {
   message?: string;
@@ -93,7 +93,7 @@ export function ErrorStackBlock({ value }: { value: StructuredErrorRecord }) {
         >
           <AlertCircle className="h-4 w-4 shrink-0" />
           <p
-            className="text-xs font-semibold m-0 truncate"
+            className="text-label-12 font-semibold m-0 truncate"
             // The full message or stack is in the body below; the header just
             // shows the first line, single-line, with overflow
             // ellipsised so a long title doesn't push the copy button or
@@ -106,7 +106,7 @@ export function ErrorStackBlock({ value }: { value: StructuredErrorRecord }) {
       )}
       {body && (
         <pre
-          className="px-3 py-2.5 text-xs font-mono whitespace-pre-wrap break-words overflow-auto m-0"
+          className="px-3 py-2.5 text-label-12-mono whitespace-pre-wrap break-words overflow-auto m-0"
           style={{
             color: 'var(--ds-red-900)',
             background: 'var(--ds-red-200)',

package/src/components/ui/kbd.tsx

@@ -12,9 +12,9 @@ const kbdVariants = cva(
           'border border-gray-alpha-400 bg-background-100 font-medium text-gray-900',
       },
       size: {
-        default: 'h-5 min-w-5 text-xs leading-none',
+        default: 'h-5 min-w-5 text-label-12 leading-none',
         compact: 'h-4 min-h-4 min-w-4 text-[11px] leading-none',
-        search: 'h-5 min-h-5 min-w-5 text-[13px] leading-[1.7em]',
+        search: 'h-5 min-h-5 min-w-5 text-label-13 leading-[1.7em]',
       },
     },
     defaultVariants: {

package/src/components/ui/timestamp-tooltip.tsx

@@ -143,13 +143,13 @@ function ZoneDateTimeRow({
     <div className="flex items-center justify-between gap-3">
       <div className="flex items-center gap-1.5">
         <div className="flex items-center justify-center h-4 px-1.5 bg-gray-200 rounded-xs">
-          <span className="text-[12px] font-mono text-gray-900">
+          <span className="text-label-12-mono text-gray-900">
             {formattedZone}
           </span>
         </div>
-        <span className="text-[13px] text-gray-1000">{formattedDate}</span>
+        <span className="text-label-13 text-gray-1000">{formattedDate}</span>
       </div>
-      <span className="tabular-nums text-[12px] font-mono text-gray-900">
+      <span className="tabular-nums text-label-12-mono text-gray-900">
         {formattedTime}
       </span>
     </div>
@@ -163,7 +163,7 @@ function RelativeTimeContextCardContent({ date }: { date: number }): ReactNode {
   return (
     <div className="flex flex-col gap-3 min-w-[300px]">
       <div className="flex flex-col gap-3">
-        <span className="tabular-nums text-[13px] text-gray-900">
+        <span className="tabular-nums text-label-13 text-gray-900">
           {timeAgo}
         </span>
       </div>

package/src/components/workflow-traces/trace-span-construction.ts

@@ -8,7 +8,7 @@ import {
   isTerminalStepEventType,
   type WorkflowRun,
 } from '@workflow/world';
-import type { Span, SpanEvent } from '../trace-viewer/types';
+import type { Span, SpanEvent } from '../../lib/trace-types';
 import { shouldShowVerticalLine } from './event-colors';
 import { calculateDuration, dateToOtelTime } from './trace-time-utils';
 

package/src/lib/trace-builder.ts

@@ -13,7 +13,6 @@ import {
   isWaitEventType,
   type WorkflowRun,
 } from '@workflow/world';
-import type { Span } from '../components/trace-viewer/types';
 import {
   getEventTimestamp,
   hookToSpan,
@@ -23,6 +22,7 @@ import {
   waitToSpan,
 } from '../components/workflow-traces/trace-span-construction';
 import { otelTimeToMs } from '../components/workflow-traces/trace-time-utils';
+import type { Span } from './trace-types';
 
 /**
  * Events that belong to the run root span rather than a child entity span.

package/src/lib/trace-types.ts

@@ -0,0 +1,56 @@
+export interface Span {
+  name: string;
+  kind: number;
+  resource: string;
+  library: {
+    name: string;
+    version?: string;
+  };
+  spanId: string;
+  parentSpanId?: string;
+  status: {
+    code: number;
+  };
+  traceFlags: number;
+  attributes: Record<string, unknown>;
+  links: Record<string, unknown>[];
+  events: SpanEvent[];
+  startTime: [number, number];
+  endTime: [number, number];
+  duration: [number, number];
+  /**
+   * The time when the span became active/started executing (optional).
+   * If provided and different from startTime, the portion between startTime
+   * and activeStartTime will be rendered as a "queued" period with different styling.
+   */
+  activeStartTime?: [number, number];
+}
+
+export interface SpanEvent {
+  name: string;
+  timestamp: [number, number];
+  attributes: Record<string, unknown>;
+  /**
+   * Optional custom color for this event marker (workflow-specific feature).
+   * If provided, this color will be used for the event marker line/diamond.
+   */
+  color?: string;
+  /**
+   * Whether to show a vertical line for this event in the timeline (workflow-specific feature).
+   * If false, only the diamond marker on the span will be shown.
+   * Defaults to true if not specified.
+   */
+  showVerticalLine?: boolean;
+}
+
+export interface Resource {
+  name: string;
+  attributes: Record<string, string>;
+}
+
+export interface Trace {
+  traceId: string;
+  resources?: Resource[];
+  spans: Span[];
+  rootSpanId?: string;
+}

package/dist/components/new-trace-viewer/components/copy-button.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"copy-button.d.ts","sourceRoot":"","sources":["../../../../src/components/new-trace-viewer/components/copy-button.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,KAAK,GAAG,EAA+B,MAAM,OAAO,CAAC;AAG9D,UAAU,eAAe;IACvB,QAAQ,EAAE,MAAM,CAAC;IACjB,SAAS,EAAE,MAAM,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,wBAAgB,UAAU,CAAC,EACzB,QAAQ,EACR,SAAS,EACT,SAAS,GACV,EAAE,eAAe,GAAG,GAAG,CAAC,OAAO,CAmD/B"}

package/dist/components/new-trace-viewer/components/copy-button.js

@@ -1,27 +0,0 @@
-'use client';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Check, Copy } from 'lucide-react';
-import { useEffect, useRef, useState } from 'react';
-import { cn } from '../../../lib/cn';
-export function CopyButton({ copyText, ariaLabel, className, }) {
-    const [copied, setCopied] = useState(false);
-    const timeoutRef = useRef(null);
-    useEffect(() => {
-        return () => {
-            if (timeoutRef.current) {
-                clearTimeout(timeoutRef.current);
-            }
-        };
-    }, []);
-    return (_jsx("button", { type: "button", "aria-label": ariaLabel, className: cn('cursor-pointer text-gray-800 hover:text-gray-1000 bg-transparent border-0 p-1 m-0', className), onClick: (e) => {
-            e.stopPropagation();
-            if (timeoutRef.current) {
-                clearTimeout(timeoutRef.current);
-            }
-            void navigator.clipboard.writeText(copyText).then(() => {
-                setCopied(true);
-                timeoutRef.current = setTimeout(() => setCopied(false), 1000);
-            });
-        }, children: _jsxs("div", { className: "relative w-3 h-3", children: [_jsx("div", { className: cn('absolute inset-0 flex items-center justify-center transition-all duration-150 ease-out', copied ? 'scale-100 opacity-100' : 'scale-0 opacity-0'), children: _jsx(Check, { className: "w-3 h-3" }) }), _jsx("div", { className: cn('absolute inset-0 flex items-center justify-center transition-all duration-150 ease-out', copied ? 'scale-0 opacity-0' : 'scale-100 opacity-100'), children: _jsx(Copy, { className: "w-3 h-3" }) })] }) }));
-}
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiY29weS1idXR0b24uanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi9zcmMvY29tcG9uZW50cy9uZXctdHJhY2Utdmlld2VyL2NvbXBvbmVudHMvY29weS1idXR0b24udHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLFlBQVksQ0FBQzs7QUFFYixPQUFPLEVBQUUsS0FBSyxFQUFFLElBQUksRUFBRSxNQUFNLGNBQWMsQ0FBQztBQUMzQyxPQUFPLEVBQVksU0FBUyxFQUFFLE1BQU0sRUFBRSxRQUFRLEVBQUUsTUFBTSxPQUFPLENBQUM7QUFDOUQsT0FBTyxFQUFFLEVBQUUsRUFBRSxNQUFNLGlCQUFpQixDQUFDO0FBUXJDLE1BQU0sVUFBVSxVQUFVLENBQUMsRUFDekIsUUFBUSxFQUNSLFNBQVMsRUFDVCxTQUFTLEdBQ087SUFDaEIsTUFBTSxDQUFDLE1BQU0sRUFBRSxTQUFTLENBQUMsR0FBRyxRQUFRLENBQUMsS0FBSyxDQUFDLENBQUM7SUFDNUMsTUFBTSxVQUFVLEdBQUcsTUFBTSxDQUF1QyxJQUFJLENBQUMsQ0FBQztJQUV0RSxTQUFTLENBQUMsR0FBRyxFQUFFO1FBQ2IsT0FBTyxHQUFHLEVBQUU7WUFDVixJQUFJLFVBQVUsQ0FBQyxPQUFPLEVBQUUsQ0FBQztnQkFDdkIsWUFBWSxDQUFDLFVBQVUsQ0FBQyxPQUFPLENBQUMsQ0FBQztZQUNuQyxDQUFDO1FBQ0gsQ0FBQyxDQUFDO0lBQ0osQ0FBQyxFQUFFLEVBQUUsQ0FBQyxDQUFDO0lBRVAsT0FBTyxDQUNMLGlCQUNFLElBQUksRUFBQyxRQUFRLGdCQUNELFNBQVMsRUFDckIsU0FBUyxFQUFFLEVBQUUsQ0FDWCxtRkFBbUYsRUFDbkYsU0FBUyxDQUNWLEVBQ0QsT0FBTyxFQUFFLENBQUMsQ0FBQyxFQUFFLEVBQUU7WUFDYixDQUFDLENBQUMsZUFBZSxFQUFFLENBQUM7WUFDcEIsSUFBSSxVQUFVLENBQUMsT0FBTyxFQUFFLENBQUM7Z0JBQ3ZCLFlBQVksQ0FBQyxVQUFVLENBQUMsT0FBTyxDQUFDLENBQUM7WUFDbkMsQ0FBQztZQUNELEtBQUssU0FBUyxDQUFDLFNBQVMsQ0FBQyxTQUFTLENBQUMsUUFBUSxDQUFDLENBQUMsSUFBSSxDQUFDLEdBQUcsRUFBRTtnQkFDckQsU0FBUyxDQUFDLElBQUksQ0FBQyxDQUFDO2dCQUNoQixVQUFVLENBQUMsT0FBTyxHQUFHLFVBQVUsQ0FBQyxHQUFHLEVBQUUsQ0FBQyxTQUFTLENBQUMsS0FBSyxDQUFDLEVBQUUsSUFBSSxDQUFDLENBQUM7WUFDaEUsQ0FBQyxDQUFDLENBQUM7UUFDTCxDQUFDLFlBRUQsZUFBSyxTQUFTLEVBQUMsa0JBQWtCLGFBQy9CLGNBQ0UsU0FBUyxFQUFFLEVBQUUsQ0FDWCx3RkFBd0YsRUFDeEYsTUFBTSxDQUFDLENBQUMsQ0FBQyx1QkFBdUIsQ0FBQyxDQUFDLENBQUMsbUJBQW1CLENBQ3ZELFlBRUQsS0FBQyxLQUFLLElBQUMsU0FBUyxFQUFDLFNBQVMsR0FBRyxHQUN6QixFQUNOLGNBQ0UsU0FBUyxFQUFFLEVBQUUsQ0FDWCx3RkFBd0YsRUFDeEYsTUFBTSxDQUFDLENBQUMsQ0FBQyxtQkFBbUIsQ0FBQyxDQUFDLENBQUMsdUJBQXVCLENBQ3ZELFlBRUQsS0FBQyxJQUFJLElBQUMsU0FBUyxFQUFDLFNBQVMsR0FBRyxHQUN4QixJQUNGLEdBQ0MsQ0FDVixDQUFDO0FBQ0osQ0FBQyIsInNvdXJjZXNDb250ZW50IjpbIid1c2UgY2xpZW50JztcblxuaW1wb3J0IHsgQ2hlY2ssIENvcHkgfSBmcm9tICdsdWNpZGUtcmVhY3QnO1xuaW1wb3J0IHsgdHlwZSBKU1gsIHVzZUVmZmVjdCwgdXNlUmVmLCB1c2VTdGF0ZSB9IGZyb20gJ3JlYWN0JztcbmltcG9ydCB7IGNuIH0gZnJvbSAnLi4vLi4vLi4vbGliL2NuJztcblxuaW50ZXJmYWNlIENvcHlCdXR0b25Qcm9wcyB7XG4gIGNvcHlUZXh0OiBzdHJpbmc7XG4gIGFyaWFMYWJlbDogc3RyaW5nO1xuICBjbGFzc05hbWU/OiBzdHJpbmc7XG59XG5cbmV4cG9ydCBmdW5jdGlvbiBDb3B5QnV0dG9uKHtcbiAgY29weVRleHQsXG4gIGFyaWFMYWJlbCxcbiAgY2xhc3NOYW1lLFxufTogQ29weUJ1dHRvblByb3BzKTogSlNYLkVsZW1lbnQge1xuICBjb25zdCBbY29waWVkLCBzZXRDb3BpZWRdID0gdXNlU3RhdGUoZmFsc2UpO1xuICBjb25zdCB0aW1lb3V0UmVmID0gdXNlUmVmPFJldHVyblR5cGU8dHlwZW9mIHNldFRpbWVvdXQ+IHwgbnVsbD4obnVsbCk7XG5cbiAgdXNlRWZmZWN0KCgpID0+IHtcbiAgICByZXR1cm4gKCkgPT4ge1xuICAgICAgaWYgKHRpbWVvdXRSZWYuY3VycmVudCkge1xuICAgICAgICBjbGVhclRpbWVvdXQodGltZW91dFJlZi5jdXJyZW50KTtcbiAgICAgIH1cbiAgICB9O1xuICB9LCBbXSk7XG5cbiAgcmV0dXJuIChcbiAgICA8YnV0dG9uXG4gICAgICB0eXBlPVwiYnV0dG9uXCJcbiAgICAgIGFyaWEtbGFiZWw9e2FyaWFMYWJlbH1cbiAgICAgIGNsYXNzTmFtZT17Y24oXG4gICAgICAgICdjdXJzb3ItcG9pbnRlciB0ZXh0LWdyYXktODAwIGhvdmVyOnRleHQtZ3JheS0xMDAwIGJnLXRyYW5zcGFyZW50IGJvcmRlci0wIHAtMSBtLTAnLFxuICAgICAgICBjbGFzc05hbWVcbiAgICAgICl9XG4gICAgICBvbkNsaWNrPXsoZSkgPT4ge1xuICAgICAgICBlLnN0b3BQcm9wYWdhdGlvbigpO1xuICAgICAgICBpZiAodGltZW91dFJlZi5jdXJyZW50KSB7XG4gICAgICAgICAgY2xlYXJUaW1lb3V0KHRpbWVvdXRSZWYuY3VycmVudCk7XG4gICAgICAgIH1cbiAgICAgICAgdm9pZCBuYXZpZ2F0b3IuY2xpcGJvYXJkLndyaXRlVGV4dChjb3B5VGV4dCkudGhlbigoKSA9PiB7XG4gICAgICAgICAgc2V0Q29waWVkKHRydWUpO1xuICAgICAgICAgIHRpbWVvdXRSZWYuY3VycmVudCA9IHNldFRpbWVvdXQoKCkgPT4gc2V0Q29waWVkKGZhbHNlKSwgMTAwMCk7XG4gICAgICAgIH0pO1xuICAgICAgfX1cbiAgICA+XG4gICAgICA8ZGl2IGNsYXNzTmFtZT1cInJlbGF0aXZlIHctMyBoLTNcIj5cbiAgICAgICAgPGRpdlxuICAgICAgICAgIGNsYXNzTmFtZT17Y24oXG4gICAgICAgICAgICAnYWJzb2x1dGUgaW5zZXQtMCBmbGV4IGl0ZW1zLWNlbnRlciBqdXN0aWZ5LWNlbnRlciB0cmFuc2l0aW9uLWFsbCBkdXJhdGlvbi0xNTAgZWFzZS1vdXQnLFxuICAgICAgICAgICAgY29waWVkID8gJ3NjYWxlLTEwMCBvcGFjaXR5LTEwMCcgOiAnc2NhbGUtMCBvcGFjaXR5LTAnXG4gICAgICAgICAgKX1cbiAgICAgICAgPlxuICAgICAgICAgIDxDaGVjayBjbGFzc05hbWU9XCJ3LTMgaC0zXCIgLz5cbiAgICAgICAgPC9kaXY+XG4gICAgICAgIDxkaXZcbiAgICAgICAgICBjbGFzc05hbWU9e2NuKFxuICAgICAgICAgICAgJ2Fic29sdXRlIGluc2V0LTAgZmxleCBpdGVtcy1jZW50ZXIganVzdGlmeS1jZW50ZXIgdHJhbnNpdGlvbi1hbGwgZHVyYXRpb24tMTUwIGVhc2Utb3V0JyxcbiAgICAgICAgICAgIGNvcGllZCA/ICdzY2FsZS0wIG9wYWNpdHktMCcgOiAnc2NhbGUtMTAwIG9wYWNpdHktMTAwJ1xuICAgICAgICAgICl9XG4gICAgICAgID5cbiAgICAgICAgICA8Q29weSBjbGFzc05hbWU9XCJ3LTMgaC0zXCIgLz5cbiAgICAgICAgPC9kaXY+XG4gICAgICA8L2Rpdj5cbiAgICA8L2J1dHRvbj5cbiAgKTtcbn1cbiJdfQ==

package/dist/components/new-trace-viewer/components/detail-panel-width.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"detail-panel-width.d.ts","sourceRoot":"","sources":["../../../../src/components/new-trace-viewer/components/detail-panel-width.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH,iFAAiF;AACjF,eAAO,MAAM,eAAe,MAAM,CAAC;AAEnC;;;GAGG;AACH,eAAO,MAAM,oBAAoB,OAAO,CAAC;AAEzC,+DAA+D;AAC/D,eAAO,MAAM,mBAAmB,MAAM,CAAC;AAEvC;;;;;GAKG;AACH,eAAO,MAAM,cAAc,MAAM,CAAC;AAElC,eAAO,MAAM,uBAAuB,sCAAsC,CAAC;AAM3E,wBAAgB,oBAAoB,CAAC,cAAc,EAAE,MAAM,GAAG,MAAM,CAMnE;AAED;;;;GAIG;AACH,wBAAgB,eAAe,CAAC,KAAK,EAAE,MAAM,EAAE,cAAc,EAAE,MAAM,GAAG,MAAM,CAE7E;AAED,wBAAgB,oBAAoB,IAAI,MAAM,CAY7C;AAED,wBAAgB,qBAAqB,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,CAUzD"}

package/dist/components/new-trace-viewer/components/detail-panel-width.js

@@ -1,67 +0,0 @@
-/**
- * Width model for the span detail panel: the stored value is the user's
- * preferred width (absolute px, persisted to localStorage on explicit
- * interaction only), while the container-relative maximum is applied at
- * render time — so a width preferred on a wide screen survives a narrower
- * session and restores when the viewer grows again.
- */
-/** Floor for the detail panel — matches the previous `clamp(280px, …)` floor. */
-export const PANEL_MIN_WIDTH = 280;
-/**
- * Absolute ceiling enforced at the storage layer so a corrupt or stale stored
- * value can never wedge the layout open.
- */
-export const PANEL_HARD_MAX_WIDTH = 1300;
-/** Default width — matches the previous fixed 360px column. */
-export const PANEL_DEFAULT_WIDTH = 360;
-/**
- * Width the main (event list + timeline) area keeps while the panel is
- * resized or the container shrinks. Below `PANEL_MIN_WIDTH + MAIN_MIN_WIDTH`
- * of container the panel gives way first, compressing below its own floor —
- * the list and timeline stay usable at the panel's expense.
- */
-export const MAIN_MIN_WIDTH = 400;
-export const PANEL_WIDTH_STORAGE_KEY = 'workflow-trace-detail-panel-width';
-function clamp(value, min, max) {
-    return Math.min(Math.max(value, min), max);
-}
-export function computeMaxPanelWidth(availableWidth) {
-    if (availableWidth <= 0)
-        return PANEL_HARD_MAX_WIDTH;
-    return Math.min(Math.max(availableWidth - MAIN_MIN_WIDTH, 0), PANEL_HARD_MAX_WIDTH);
-}
-/**
- * Note: when the container is too small to honor both floors
- * (`availableWidth < PANEL_MIN_WIDTH + MAIN_MIN_WIDTH`), the max wins and the
- * panel compresses below `PANEL_MIN_WIDTH`.
- */
-export function clampPanelWidth(width, availableWidth) {
-    return clamp(width, PANEL_MIN_WIDTH, computeMaxPanelWidth(availableWidth));
-}
-export function readStoredPanelWidth() {
-    if (typeof window === 'undefined')
-        return PANEL_DEFAULT_WIDTH;
-    try {
-        const raw = window.localStorage.getItem(PANEL_WIDTH_STORAGE_KEY);
-        const value = raw ? Number(raw) : Number.NaN;
-        if (!Number.isFinite(value))
-            return PANEL_DEFAULT_WIDTH;
-        // Only enforce absolute bounds at the storage layer; the container-relative
-        // max is applied at render time (see module docs).
-        return clamp(value, PANEL_MIN_WIDTH, PANEL_HARD_MAX_WIDTH);
-    }
-    catch {
-        return PANEL_DEFAULT_WIDTH;
-    }
-}
-export function writeStoredPanelWidth(width) {
-    if (typeof window === 'undefined')
-        return;
-    try {
-        window.localStorage.setItem(PANEL_WIDTH_STORAGE_KEY, String(Math.round(width)));
-    }
-    catch {
-        // Best-effort (private mode, quota).
-    }
-}
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZGV0YWlsLXBhbmVsLXdpZHRoLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vc3JjL2NvbXBvbmVudHMvbmV3LXRyYWNlLXZpZXdlci9jb21wb25lbnRzL2RldGFpbC1wYW5lbC13aWR0aC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQTs7Ozs7O0dBTUc7QUFFSCxpRkFBaUY7QUFDakYsTUFBTSxDQUFDLE1BQU0sZUFBZSxHQUFHLEdBQUcsQ0FBQztBQUVuQzs7O0dBR0c7QUFDSCxNQUFNLENBQUMsTUFBTSxvQkFBb0IsR0FBRyxJQUFJLENBQUM7QUFFekMsK0RBQStEO0FBQy9ELE1BQU0sQ0FBQyxNQUFNLG1CQUFtQixHQUFHLEdBQUcsQ0FBQztBQUV2Qzs7Ozs7R0FLRztBQUNILE1BQU0sQ0FBQyxNQUFNLGNBQWMsR0FBRyxHQUFHLENBQUM7QUFFbEMsTUFBTSxDQUFDLE1BQU0sdUJBQXVCLEdBQUcsbUNBQW1DLENBQUM7QUFFM0UsU0FBUyxLQUFLLENBQUMsS0FBYSxFQUFFLEdBQVcsRUFBRSxHQUFXO0lBQ3BELE9BQU8sSUFBSSxDQUFDLEdBQUcsQ0FBQyxJQUFJLENBQUMsR0FBRyxDQUFDLEtBQUssRUFBRSxHQUFHLENBQUMsRUFBRSxHQUFHLENBQUMsQ0FBQztBQUM3QyxDQUFDO0FBRUQsTUFBTSxVQUFVLG9CQUFvQixDQUFDLGNBQXNCO0lBQ3pELElBQUksY0FBYyxJQUFJLENBQUM7UUFBRSxPQUFPLG9CQUFvQixDQUFDO0lBQ3JELE9BQU8sSUFBSSxDQUFDLEdBQUcsQ0FDYixJQUFJLENBQUMsR0FBRyxDQUFDLGNBQWMsR0FBRyxjQUFjLEVBQUUsQ0FBQyxDQUFDLEVBQzVDLG9CQUFvQixDQUNyQixDQUFDO0FBQ0osQ0FBQztBQUVEOzs7O0dBSUc7QUFDSCxNQUFNLFVBQVUsZUFBZSxDQUFDLEtBQWEsRUFBRSxjQUFzQjtJQUNuRSxPQUFPLEtBQUssQ0FBQyxLQUFLLEVBQUUsZUFBZSxFQUFFLG9CQUFvQixDQUFDLGNBQWMsQ0FBQyxDQUFDLENBQUM7QUFDN0UsQ0FBQztBQUVELE1BQU0sVUFBVSxvQkFBb0I7SUFDbEMsSUFBSSxPQUFPLE1BQU0sS0FBSyxXQUFXO1FBQUUsT0FBTyxtQkFBbUIsQ0FBQztJQUM5RCxJQUFJLENBQUM7UUFDSCxNQUFNLEdBQUcsR0FBRyxNQUFNLENBQUMsWUFBWSxDQUFDLE9BQU8sQ0FBQyx1QkFBdUIsQ0FBQyxDQUFDO1FBQ2pFLE1BQU0sS0FBSyxHQUFHLEdBQUcsQ0FBQyxDQUFDLENBQUMsTUFBTSxDQUFDLEdBQUcsQ0FBQyxDQUFDLENBQUMsQ0FBQyxNQUFNLENBQUMsR0FBRyxDQUFDO1FBQzdDLElBQUksQ0FBQyxNQUFNLENBQUMsUUFBUSxDQUFDLEtBQUssQ0FBQztZQUFFLE9BQU8sbUJBQW1CLENBQUM7UUFDeEQsNEVBQTRFO1FBQzVFLG1EQUFtRDtRQUNuRCxPQUFPLEtBQUssQ0FBQyxLQUFLLEVBQUUsZUFBZSxFQUFFLG9CQUFvQixDQUFDLENBQUM7SUFDN0QsQ0FBQztJQUFDLE1BQU0sQ0FBQztRQUNQLE9BQU8sbUJBQW1CLENBQUM7SUFDN0IsQ0FBQztBQUNILENBQUM7QUFFRCxNQUFNLFVBQVUscUJBQXFCLENBQUMsS0FBYTtJQUNqRCxJQUFJLE9BQU8sTUFBTSxLQUFLLFdBQVc7UUFBRSxPQUFPO0lBQzFDLElBQUksQ0FBQztRQUNILE1BQU0sQ0FBQyxZQUFZLENBQUMsT0FBTyxDQUN6Qix1QkFBdUIsRUFDdkIsTUFBTSxDQUFDLElBQUksQ0FBQyxLQUFLLENBQUMsS0FBSyxDQUFDLENBQUMsQ0FDMUIsQ0FBQztJQUNKLENBQUM7SUFBQyxNQUFNLENBQUM7UUFDUCxxQ0FBcUM7SUFDdkMsQ0FBQztBQUNILENBQUMiLCJzb3VyY2VzQ29udGVudCI6WyIvKipcbiAqIFdpZHRoIG1vZGVsIGZvciB0aGUgc3BhbiBkZXRhaWwgcGFuZWw6IHRoZSBzdG9yZWQgdmFsdWUgaXMgdGhlIHVzZXInc1xuICogcHJlZmVycmVkIHdpZHRoIChhYnNvbHV0ZSBweCwgcGVyc2lzdGVkIHRvIGxvY2FsU3RvcmFnZSBvbiBleHBsaWNpdFxuICogaW50ZXJhY3Rpb24gb25seSksIHdoaWxlIHRoZSBjb250YWluZXItcmVsYXRpdmUgbWF4aW11bSBpcyBhcHBsaWVkIGF0XG4gKiByZW5kZXIgdGltZSDigJQgc28gYSB3aWR0aCBwcmVmZXJyZWQgb24gYSB3aWRlIHNjcmVlbiBzdXJ2aXZlcyBhIG5hcnJvd2VyXG4gKiBzZXNzaW9uIGFuZCByZXN0b3JlcyB3aGVuIHRoZSB2aWV3ZXIgZ3Jvd3MgYWdhaW4uXG4gKi9cblxuLyoqIEZsb29yIGZvciB0aGUgZGV0YWlsIHBhbmVsIOKAlCBtYXRjaGVzIHRoZSBwcmV2aW91cyBgY2xhbXAoMjgwcHgsIOKApilgIGZsb29yLiAqL1xuZXhwb3J0IGNvbnN0IFBBTkVMX01JTl9XSURUSCA9IDI4MDtcblxuLyoqXG4gKiBBYnNvbHV0ZSBjZWlsaW5nIGVuZm9yY2VkIGF0IHRoZSBzdG9yYWdlIGxheWVyIHNvIGEgY29ycnVwdCBvciBzdGFsZSBzdG9yZWRcbiAqIHZhbHVlIGNhbiBuZXZlciB3ZWRnZSB0aGUgbGF5b3V0IG9wZW4uXG4gKi9cbmV4cG9ydCBjb25zdCBQQU5FTF9IQVJEX01BWF9XSURUSCA9IDEzMDA7XG5cbi8qKiBEZWZhdWx0IHdpZHRoIOKAlCBtYXRjaGVzIHRoZSBwcmV2aW91cyBmaXhlZCAzNjBweCBjb2x1bW4uICovXG5leHBvcnQgY29uc3QgUEFORUxfREVGQVVMVF9XSURUSCA9IDM2MDtcblxuLyoqXG4gKiBXaWR0aCB0aGUgbWFpbiAoZXZlbnQgbGlzdCArIHRpbWVsaW5lKSBhcmVhIGtlZXBzIHdoaWxlIHRoZSBwYW5lbCBpc1xuICogcmVzaXplZCBvciB0aGUgY29udGFpbmVyIHNocmlua3MuIEJlbG93IGBQQU5FTF9NSU5fV0lEVEggKyBNQUlOX01JTl9XSURUSGBcbiAqIG9mIGNvbnRhaW5lciB0aGUgcGFuZWwgZ2l2ZXMgd2F5IGZpcnN0LCBjb21wcmVzc2luZyBiZWxvdyBpdHMgb3duIGZsb29yIOKAlFxuICogdGhlIGxpc3QgYW5kIHRpbWVsaW5lIHN0YXkgdXNhYmxlIGF0IHRoZSBwYW5lbCdzIGV4cGVuc2UuXG4gKi9cbmV4cG9ydCBjb25zdCBNQUlOX01JTl9XSURUSCA9IDQwMDtcblxuZXhwb3J0IGNvbnN0IFBBTkVMX1dJRFRIX1NUT1JBR0VfS0VZID0gJ3dvcmtmbG93LXRyYWNlLWRldGFpbC1wYW5lbC13aWR0aCc7XG5cbmZ1bmN0aW9uIGNsYW1wKHZhbHVlOiBudW1iZXIsIG1pbjogbnVtYmVyLCBtYXg6IG51bWJlcik6IG51bWJlciB7XG4gIHJldHVybiBNYXRoLm1pbihNYXRoLm1heCh2YWx1ZSwgbWluKSwgbWF4KTtcbn1cblxuZXhwb3J0IGZ1bmN0aW9uIGNvbXB1dGVNYXhQYW5lbFdpZHRoKGF2YWlsYWJsZVdpZHRoOiBudW1iZXIpOiBudW1iZXIge1xuICBpZiAoYXZhaWxhYmxlV2lkdGggPD0gMCkgcmV0dXJuIFBBTkVMX0hBUkRfTUFYX1dJRFRIO1xuICByZXR1cm4gTWF0aC5taW4oXG4gICAgTWF0aC5tYXgoYXZhaWxhYmxlV2lkdGggLSBNQUlOX01JTl9XSURUSCwgMCksXG4gICAgUEFORUxfSEFSRF9NQVhfV0lEVEhcbiAgKTtcbn1cblxuLyoqXG4gKiBOb3RlOiB3aGVuIHRoZSBjb250YWluZXIgaXMgdG9vIHNtYWxsIHRvIGhvbm9yIGJvdGggZmxvb3JzXG4gKiAoYGF2YWlsYWJsZVdpZHRoIDwgUEFORUxfTUlOX1dJRFRIICsgTUFJTl9NSU5fV0lEVEhgKSwgdGhlIG1heCB3aW5zIGFuZCB0aGVcbiAqIHBhbmVsIGNvbXByZXNzZXMgYmVsb3cgYFBBTkVMX01JTl9XSURUSGAuXG4gKi9cbmV4cG9ydCBmdW5jdGlvbiBjbGFtcFBhbmVsV2lkdGgod2lkdGg6IG51bWJlciwgYXZhaWxhYmxlV2lkdGg6IG51bWJlcik6IG51bWJlciB7XG4gIHJldHVybiBjbGFtcCh3aWR0aCwgUEFORUxfTUlOX1dJRFRILCBjb21wdXRlTWF4UGFuZWxXaWR0aChhdmFpbGFibGVXaWR0aCkpO1xufVxuXG5leHBvcnQgZnVuY3Rpb24gcmVhZFN0b3JlZFBhbmVsV2lkdGgoKTogbnVtYmVyIHtcbiAgaWYgKHR5cGVvZiB3aW5kb3cgPT09ICd1bmRlZmluZWQnKSByZXR1cm4gUEFORUxfREVGQVVMVF9XSURUSDtcbiAgdHJ5IHtcbiAgICBjb25zdCByYXcgPSB3aW5kb3cubG9jYWxTdG9yYWdlLmdldEl0ZW0oUEFORUxfV0lEVEhfU1RPUkFHRV9LRVkpO1xuICAgIGNvbnN0IHZhbHVlID0gcmF3ID8gTnVtYmVyKHJhdykgOiBOdW1iZXIuTmFOO1xuICAgIGlmICghTnVtYmVyLmlzRmluaXRlKHZhbHVlKSkgcmV0dXJuIFBBTkVMX0RFRkFVTFRfV0lEVEg7XG4gICAgLy8gT25seSBlbmZvcmNlIGFic29sdXRlIGJvdW5kcyBhdCB0aGUgc3RvcmFnZSBsYXllcjsgdGhlIGNvbnRhaW5lci1yZWxhdGl2ZVxuICAgIC8vIG1heCBpcyBhcHBsaWVkIGF0IHJlbmRlciB0aW1lIChzZWUgbW9kdWxlIGRvY3MpLlxuICAgIHJldHVybiBjbGFtcCh2YWx1ZSwgUEFORUxfTUlOX1dJRFRILCBQQU5FTF9IQVJEX01BWF9XSURUSCk7XG4gIH0gY2F0Y2gge1xuICAgIHJldHVybiBQQU5FTF9ERUZBVUxUX1dJRFRIO1xuICB9XG59XG5cbmV4cG9ydCBmdW5jdGlvbiB3cml0ZVN0b3JlZFBhbmVsV2lkdGgod2lkdGg6IG51bWJlcik6IHZvaWQge1xuICBpZiAodHlwZW9mIHdpbmRvdyA9PT0gJ3VuZGVmaW5lZCcpIHJldHVybjtcbiAgdHJ5IHtcbiAgICB3aW5kb3cubG9jYWxTdG9yYWdlLnNldEl0ZW0oXG4gICAgICBQQU5FTF9XSURUSF9TVE9SQUdFX0tFWSxcbiAgICAgIFN0cmluZyhNYXRoLnJvdW5kKHdpZHRoKSlcbiAgICApO1xuICB9IGNhdGNoIHtcbiAgICAvLyBCZXN0LWVmZm9ydCAocHJpdmF0ZSBtb2RlLCBxdW90YSkuXG4gIH1cbn1cbiJdfQ==

package/dist/components/new-trace-viewer/components/detail-panel.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"detail-panel.d.ts","sourceRoot":"","sources":["../../../../src/components/new-trace-viewer/components/detail-panel.tsx"],"names":[],"mappings":"AAIA,OAAO,EACL,KAAK,SAAS,EACd,KAAK,SAAS,EAMf,MAAM,OAAO,CAAC;AAiDf;;;;;;GAMG;AACH,wBAAgB,gBAAgB,CAAC,EAC/B,YAAY,EACZ,gBAAgB,EAChB,OAAO,GACR,EAAE;IACD,YAAY,EAAE,SAAS,CAAC,cAAc,GAAG,IAAI,CAAC,CAAC;IAC/C,gBAAgB,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IAC3C,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB,GAAG,SAAS,CAoMZ"}