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

package/dist/components/new-trace-viewer/components/middle-truncate/use-middle-truncate.js

@@ -0,0 +1,114 @@
+'use client';
+import { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState, } from 'react';
+import { middleTruncate, toGraphemes } from './truncate';
+const useIsomorphicLayoutEffect = typeof window === 'undefined' ? useEffect : useLayoutEffect;
+function createFullState(value, graphemes) {
+    return {
+        displayText: value,
+        isTruncated: false,
+        prefixGraphemeCount: graphemes.length,
+        prefixText: value,
+        suffixGraphemeCount: 0,
+        suffixText: '',
+    };
+}
+/**
+ * Middle-truncation logic. Returns refs to attach to the container and measurement elements, plus the truncated display text. Recalculates on resize, font loading, and value changes.
+ * Powers the `<MiddleTruncate>` (`<span>`) component.
+ *
+ * Documentation: [Geist Middle Truncate](https://vercel.com/geist/middle-truncate)
+ *
+ * @param value - Full text string to truncate.
+ */
+function useMiddleTruncate(value) {
+    const graphemes = useMemo(() => toGraphemes(value), [value]);
+    const fullState = useMemo(() => createFullState(value, graphemes), [graphemes, value]);
+    const ref = useRef(null);
+    const measureRef = useRef(null);
+    const [state, setState] = useState(() => fullState);
+    const rafRef = useRef(0);
+    const updateState = useCallback((nextState) => {
+        setState((currentState) => {
+            if (currentState.displayText === nextState.displayText &&
+                currentState.isTruncated === nextState.isTruncated &&
+                currentState.prefixText === nextState.prefixText &&
+                currentState.prefixGraphemeCount === nextState.prefixGraphemeCount &&
+                currentState.suffixText === nextState.suffixText &&
+                currentState.suffixGraphemeCount === nextState.suffixGraphemeCount) {
+                return currentState;
+            }
+            return nextState;
+        });
+    }, []);
+    const recalculate = useCallback(() => {
+        const el = ref.current;
+        const measureEl = measureRef.current;
+        if (!el || !measureEl)
+            return;
+        const available = el.clientWidth;
+        if (available <= 0) {
+            updateState(fullState);
+            return;
+        }
+        const measure = (text) => {
+            measureEl.textContent = text;
+            return measureEl.scrollWidth;
+        };
+        const fullWidth = measure(value);
+        if (fullWidth <= available) {
+            updateState(fullState);
+            return;
+        }
+        const result = middleTruncate(graphemes, available, measure, fullWidth);
+        updateState({
+            displayText: result.text,
+            isTruncated: result.truncated,
+            prefixGraphemeCount: result.prefixGraphemeCount,
+            prefixText: result.prefixText,
+            suffixGraphemeCount: result.suffixGraphemeCount,
+            suffixText: result.suffixText,
+        });
+    }, [fullState, graphemes, updateState, value]);
+    // Measure on mount and when value changes - before paint
+    useIsomorphicLayoutEffect(() => {
+        recalculate();
+    }, [recalculate]);
+    // ResizeObserver + font loading for ongoing responsiveness
+    useEffect(() => {
+        const el = ref.current;
+        if (!el)
+            return;
+        const debouncedRecalc = () => {
+            cancelAnimationFrame(rafRef.current);
+            rafRef.current = requestAnimationFrame(recalculate);
+        };
+        const ro = typeof ResizeObserver !== 'undefined'
+            ? new ResizeObserver(debouncedRecalc)
+            : null;
+        ro?.observe(el);
+        window.addEventListener('resize', debouncedRecalc);
+        const onFontsLoaded = () => {
+            debouncedRecalc();
+        };
+        const fontSet = 'fonts' in document ? document.fonts : null;
+        fontSet?.addEventListener?.('loadingdone', onFontsLoaded);
+        return () => {
+            ro?.disconnect();
+            window.removeEventListener('resize', debouncedRecalc);
+            cancelAnimationFrame(rafRef.current);
+            fontSet?.removeEventListener?.('loadingdone', onFontsLoaded);
+        };
+    }, [recalculate]);
+    return {
+        ref,
+        measureRef,
+        displayText: state.displayText,
+        isTruncated: state.isTruncated,
+        prefixGraphemeCount: state.prefixGraphemeCount,
+        prefixText: state.prefixText,
+        suffixGraphemeCount: state.suffixGraphemeCount,
+        suffixText: state.suffixText,
+    };
+}
+export { useMiddleTruncate };
+//# sourceMappingURL=use-middle-truncate.js.map

package/dist/components/new-trace-viewer/components/middle-truncate/use-middle-truncate.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-middle-truncate.js","sourceRoot":"","sources":["../../../../../src/components/new-trace-viewer/components/middle-truncate/use-middle-truncate.ts"],"names":[],"mappings":"AAAA,YAAY,CAAC;AAEb,OAAO,EACL,WAAW,EACX,SAAS,EACT,eAAe,EACf,OAAO,EACP,MAAM,EACN,QAAQ,GACT,MAAM,OAAO,CAAC;AACf,OAAO,EAAE,cAAc,EAAE,WAAW,EAAE,MAAM,YAAY,CAAC;AAEzD,MAAM,yBAAyB,GAC7B,OAAO,MAAM,KAAK,WAAW,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,eAAe,CAAC;AAW9D,SAAS,eAAe,CACtB,KAAa,EACb,SAAmB;IAEnB,OAAO;QACL,WAAW,EAAE,KAAK;QAClB,WAAW,EAAE,KAAK;QAClB,mBAAmB,EAAE,SAAS,CAAC,MAAM;QACrC,UAAU,EAAE,KAAK;QACjB,mBAAmB,EAAE,CAAC;QACtB,UAAU,EAAE,EAAE;KACf,CAAC;AACJ,CAAC;AAED;;;;;;;GAOG;AACH,SAAS,iBAAiB,CAAC,KAAa;IAUtC,MAAM,SAAS,GAAG,OAAO,CAAC,GAAG,EAAE,CAAC,WAAW,CAAC,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;IAC7D,MAAM,SAAS,GAAG,OAAO,CACvB,GAAG,EAAE,CAAC,eAAe,CAAC,KAAK,EAAE,SAAS,CAAC,EACvC,CAAC,SAAS,EAAE,KAAK,CAAC,CACnB,CAAC;IACF,MAAM,GAAG,GAAG,MAAM,CAAyB,IAAI,CAAC,CAAC;IACjD,MAAM,UAAU,GAAG,MAAM,CAAyB,IAAI,CAAC,CAAC;IACxD,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAsB,GAAG,EAAE,CAAC,SAAS,CAAC,CAAC;IACzE,MAAM,MAAM,GAAG,MAAM,CAAS,CAAC,CAAC,CAAC;IAEjC,MAAM,WAAW,GAAG,WAAW,CAAC,CAAC,SAA8B,EAAE,EAAE;QACjE,QAAQ,CAAC,CAAC,YAAY,EAAE,EAAE;YACxB,IACE,YAAY,CAAC,WAAW,KAAK,SAAS,CAAC,WAAW;gBAClD,YAAY,CAAC,WAAW,KAAK,SAAS,CAAC,WAAW;gBAClD,YAAY,CAAC,UAAU,KAAK,SAAS,CAAC,UAAU;gBAChD,YAAY,CAAC,mBAAmB,KAAK,SAAS,CAAC,mBAAmB;gBAClE,YAAY,CAAC,UAAU,KAAK,SAAS,CAAC,UAAU;gBAChD,YAAY,CAAC,mBAAmB,KAAK,SAAS,CAAC,mBAAmB,EAClE,CAAC;gBACD,OAAO,YAAY,CAAC;YACtB,CAAC;YAED,OAAO,SAAS,CAAC;QACnB,CAAC,CAAC,CAAC;IACL,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,MAAM,WAAW,GAAG,WAAW,CAAC,GAAG,EAAE;QACnC,MAAM,EAAE,GAAG,GAAG,CAAC,OAAO,CAAC;QACvB,MAAM,SAAS,GAAG,UAAU,CAAC,OAAO,CAAC;QACrC,IAAI,CAAC,EAAE,IAAI,CAAC,SAAS;YAAE,OAAO;QAE9B,MAAM,SAAS,GAAG,EAAE,CAAC,WAAW,CAAC;QAEjC,IAAI,SAAS,IAAI,CAAC,EAAE,CAAC;YACnB,WAAW,CAAC,SAAS,CAAC,CAAC;YACvB,OAAO;QACT,CAAC;QAED,MAAM,OAAO,GAAG,CAAC,IAAY,EAAU,EAAE;YACvC,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC;YAC7B,OAAO,SAAS,CAAC,WAAW,CAAC;QAC/B,CAAC,CAAC;QAEF,MAAM,SAAS,GAAG,OAAO,CAAC,KAAK,CAAC,CAAC;QAEjC,IAAI,SAAS,IAAI,SAAS,EAAE,CAAC;YAC3B,WAAW,CAAC,SAAS,CAAC,CAAC;YACvB,OAAO;QACT,CAAC;QAED,MAAM,MAAM,GAAG,cAAc,CAAC,SAAS,EAAE,SAAS,EAAE,OAAO,EAAE,SAAS,CAAC,CAAC;QACxE,WAAW,CAAC;YACV,WAAW,EAAE,MAAM,CAAC,IAAI;YACxB,WAAW,EAAE,MAAM,CAAC,SAAS;YAC7B,mBAAmB,EAAE,MAAM,CAAC,mBAAmB;YAC/C,UAAU,EAAE,MAAM,CAAC,UAAU;YAC7B,mBAAmB,EAAE,MAAM,CAAC,mBAAmB;YAC/C,UAAU,EAAE,MAAM,CAAC,UAAU;SAC9B,CAAC,CAAC;IACL,CAAC,EAAE,CAAC,SAAS,EAAE,SAAS,EAAE,WAAW,EAAE,KAAK,CAAC,CAAC,CAAC;IAE/C,yDAAyD;IACzD,yBAAyB,CAAC,GAAG,EAAE;QAC7B,WAAW,EAAE,CAAC;IAChB,CAAC,EAAE,CAAC,WAAW,CAAC,CAAC,CAAC;IAElB,2DAA2D;IAC3D,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,EAAE,GAAG,GAAG,CAAC,OAAO,CAAC;QACvB,IAAI,CAAC,EAAE;YAAE,OAAO;QAEhB,MAAM,eAAe,GAAG,GAAS,EAAE;YACjC,oBAAoB,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC;YACrC,MAAM,CAAC,OAAO,GAAG,qBAAqB,CAAC,WAAW,CAAC,CAAC;QACtD,CAAC,CAAC;QAEF,MAAM,EAAE,GACN,OAAO,cAAc,KAAK,WAAW;YACnC,CAAC,CAAC,IAAI,cAAc,CAAC,eAAe,CAAC;YACrC,CAAC,CAAC,IAAI,CAAC;QACX,EAAE,EAAE,OAAO,CAAC,EAAE,CAAC,CAAC;QAChB,MAAM,CAAC,gBAAgB,CAAC,QAAQ,EAAE,eAAe,CAAC,CAAC;QAEnD,MAAM,aAAa,GAAG,GAAS,EAAE;YAC/B,eAAe,EAAE,CAAC;QACpB,CAAC,CAAC;QACF,MAAM,OAAO,GAAG,OAAO,IAAI,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC;QAC5D,OAAO,EAAE,gBAAgB,EAAE,CAAC,aAAa,EAAE,aAAa,CAAC,CAAC;QAE1D,OAAO,GAAG,EAAE;YACV,EAAE,EAAE,UAAU,EAAE,CAAC;YACjB,MAAM,CAAC,mBAAmB,CAAC,QAAQ,EAAE,eAAe,CAAC,CAAC;YACtD,oBAAoB,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC;YACrC,OAAO,EAAE,mBAAmB,EAAE,CAAC,aAAa,EAAE,aAAa,CAAC,CAAC;QAC/D,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,WAAW,CAAC,CAAC,CAAC;IAElB,OAAO;QACL,GAAG;QACH,UAAU;QACV,WAAW,EAAE,KAAK,CAAC,WAAW;QAC9B,WAAW,EAAE,KAAK,CAAC,WAAW;QAC9B,mBAAmB,EAAE,KAAK,CAAC,mBAAmB;QAC9C,UAAU,EAAE,KAAK,CAAC,UAAU;QAC5B,mBAAmB,EAAE,KAAK,CAAC,mBAAmB;QAC9C,UAAU,EAAE,KAAK,CAAC,UAAU;KAC7B,CAAC;AACJ,CAAC;AAED,OAAO,EAAE,iBAAiB,EAAE,CAAC","sourcesContent":["'use client';\n\nimport {\n  useCallback,\n  useEffect,\n  useLayoutEffect,\n  useMemo,\n  useRef,\n  useState,\n} from 'react';\nimport { middleTruncate, toGraphemes } from './truncate';\n\nconst useIsomorphicLayoutEffect =\n  typeof window === 'undefined' ? useEffect : useLayoutEffect;\n\ninterface MiddleTruncateState {\n  displayText: string;\n  isTruncated: boolean;\n  prefixGraphemeCount: number;\n  prefixText: string;\n  suffixGraphemeCount: number;\n  suffixText: string;\n}\n\nfunction createFullState(\n  value: string,\n  graphemes: string[]\n): MiddleTruncateState {\n  return {\n    displayText: value,\n    isTruncated: false,\n    prefixGraphemeCount: graphemes.length,\n    prefixText: value,\n    suffixGraphemeCount: 0,\n    suffixText: '',\n  };\n}\n\n/**\n * Middle-truncation logic. Returns refs to attach to the container and measurement elements, plus the truncated display text. Recalculates on resize, font loading, and value changes.\n * Powers the `<MiddleTruncate>` (`<span>`) component.\n *\n * Documentation: [Geist Middle Truncate](https://vercel.com/geist/middle-truncate)\n *\n * @param value - Full text string to truncate.\n */\nfunction useMiddleTruncate(value: string): {\n  ref: React.RefObject<HTMLSpanElement | null>;\n  measureRef: React.RefObject<HTMLSpanElement | null>;\n  displayText: string;\n  isTruncated: boolean;\n  prefixGraphemeCount: number;\n  prefixText: string;\n  suffixGraphemeCount: number;\n  suffixText: string;\n} {\n  const graphemes = useMemo(() => toGraphemes(value), [value]);\n  const fullState = useMemo(\n    () => createFullState(value, graphemes),\n    [graphemes, value]\n  );\n  const ref = useRef<HTMLSpanElement | null>(null);\n  const measureRef = useRef<HTMLSpanElement | null>(null);\n  const [state, setState] = useState<MiddleTruncateState>(() => fullState);\n  const rafRef = useRef<number>(0);\n\n  const updateState = useCallback((nextState: MiddleTruncateState) => {\n    setState((currentState) => {\n      if (\n        currentState.displayText === nextState.displayText &&\n        currentState.isTruncated === nextState.isTruncated &&\n        currentState.prefixText === nextState.prefixText &&\n        currentState.prefixGraphemeCount === nextState.prefixGraphemeCount &&\n        currentState.suffixText === nextState.suffixText &&\n        currentState.suffixGraphemeCount === nextState.suffixGraphemeCount\n      ) {\n        return currentState;\n      }\n\n      return nextState;\n    });\n  }, []);\n\n  const recalculate = useCallback(() => {\n    const el = ref.current;\n    const measureEl = measureRef.current;\n    if (!el || !measureEl) return;\n\n    const available = el.clientWidth;\n\n    if (available <= 0) {\n      updateState(fullState);\n      return;\n    }\n\n    const measure = (text: string): number => {\n      measureEl.textContent = text;\n      return measureEl.scrollWidth;\n    };\n\n    const fullWidth = measure(value);\n\n    if (fullWidth <= available) {\n      updateState(fullState);\n      return;\n    }\n\n    const result = middleTruncate(graphemes, available, measure, fullWidth);\n    updateState({\n      displayText: result.text,\n      isTruncated: result.truncated,\n      prefixGraphemeCount: result.prefixGraphemeCount,\n      prefixText: result.prefixText,\n      suffixGraphemeCount: result.suffixGraphemeCount,\n      suffixText: result.suffixText,\n    });\n  }, [fullState, graphemes, updateState, value]);\n\n  // Measure on mount and when value changes - before paint\n  useIsomorphicLayoutEffect(() => {\n    recalculate();\n  }, [recalculate]);\n\n  // ResizeObserver + font loading for ongoing responsiveness\n  useEffect(() => {\n    const el = ref.current;\n    if (!el) return;\n\n    const debouncedRecalc = (): void => {\n      cancelAnimationFrame(rafRef.current);\n      rafRef.current = requestAnimationFrame(recalculate);\n    };\n\n    const ro =\n      typeof ResizeObserver !== 'undefined'\n        ? new ResizeObserver(debouncedRecalc)\n        : null;\n    ro?.observe(el);\n    window.addEventListener('resize', debouncedRecalc);\n\n    const onFontsLoaded = (): void => {\n      debouncedRecalc();\n    };\n    const fontSet = 'fonts' in document ? document.fonts : null;\n    fontSet?.addEventListener?.('loadingdone', onFontsLoaded);\n\n    return () => {\n      ro?.disconnect();\n      window.removeEventListener('resize', debouncedRecalc);\n      cancelAnimationFrame(rafRef.current);\n      fontSet?.removeEventListener?.('loadingdone', onFontsLoaded);\n    };\n  }, [recalculate]);\n\n  return {\n    ref,\n    measureRef,\n    displayText: state.displayText,\n    isTruncated: state.isTruncated,\n    prefixGraphemeCount: state.prefixGraphemeCount,\n    prefixText: state.prefixText,\n    suffixGraphemeCount: state.suffixGraphemeCount,\n    suffixText: state.suffixText,\n  };\n}\n\nexport { useMiddleTruncate };\n"]}

package/dist/components/new-trace-viewer/components/split-pane.d.ts

@@ -0,0 +1,14 @@
+import { type ReactNode } from 'react';
+export declare function Divider(): import("react/jsx-runtime").JSX.Element;
+export interface SplitPaneProps {
+    children: ReactNode;
+    className?: string;
+    /** Fixed pixel width for the start (left) pane. Default 220. */
+    defaultStartWidth?: number;
+    /** Fixed (non-scrolling) header rendered above the start pane. */
+    startHeader?: ReactNode;
+    /** Fixed (non-scrolling) header rendered above the end pane. */
+    endHeader?: ReactNode;
+}
+export declare function SplitPane({ children, className, defaultStartWidth, startHeader, endHeader, }: SplitPaneProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=split-pane.d.ts.map

package/dist/components/new-trace-viewer/components/split-pane.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"split-pane.d.ts","sourceRoot":"","sources":["../../../../src/components/new-trace-viewer/components/split-pane.tsx"],"names":[],"mappings":"AAEA,OAAO,EAEL,KAAK,SAAS,EAMf,MAAM,OAAO,CAAC;AAOf,wBAAgB,OAAO,4CAEtB;AAED,MAAM,WAAW,cAAc;IAC7B,QAAQ,EAAE,SAAS,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,gEAAgE;IAChE,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,kEAAkE;IAClE,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,gEAAgE;IAChE,SAAS,CAAC,EAAE,SAAS,CAAC;CACvB;AAED,wBAAgB,SAAS,CAAC,EACxB,QAAQ,EACR,SAAS,EACT,iBAAoC,EACpC,WAAW,EACX,SAAS,GACV,EAAE,cAAc,2CAkJhB"}

package/dist/components/new-trace-viewer/components/split-pane.js

@@ -0,0 +1,99 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Children, useCallback, useEffect, useRef, useState, } from 'react';
+import { cn } from '../../../lib/utils';
+const GUTTER_PX = 1;
+const MIN_PX = 50;
+const DEFAULT_START_PX = 340;
+export function Divider() {
+    return _jsx("div", { "aria-hidden": true, className: "h-full w-px shrink-0 bg-gray-alpha-400" });
+}
+export function SplitPane({ children, className, defaultStartWidth = DEFAULT_START_PX, startHeader, endHeader, }) {
+    const parts = Children.toArray(children);
+    if (parts.length !== 2) {
+        throw new Error('SplitPane expects exactly two children');
+    }
+    const [start, end] = parts;
+    const [startPx, setStartPx] = useState(defaultStartWidth);
+    const [isDragging, setIsDragging] = useState(false);
+    const containerRef = useRef(null);
+    const gutterRef = useRef(null);
+    const rafRef = useRef(null);
+    const pendingPx = useRef(defaultStartWidth);
+    const pointerIdRef = useRef(null);
+    useEffect(() => {
+        return () => {
+            if (rafRef.current)
+                cancelAnimationFrame(rafRef.current);
+        };
+    }, []);
+    const clampPx = useCallback((px) => {
+        const el = containerRef.current;
+        if (!el)
+            return px;
+        const maxPx = el.getBoundingClientRect().width - MIN_PX - GUTTER_PX;
+        return Math.min(maxPx, Math.max(MIN_PX, px));
+    }, []);
+    useEffect(() => {
+        if (!isDragging)
+            return;
+        const onPointerMove = (e) => {
+            if (e.pointerId !== pointerIdRef.current)
+                return;
+            const container = containerRef.current;
+            if (!container)
+                return;
+            const rect = container.getBoundingClientRect();
+            pendingPx.current = clampPx(e.clientX - rect.left);
+            if (!rafRef.current) {
+                rafRef.current = requestAnimationFrame(() => {
+                    rafRef.current = null;
+                    setStartPx(pendingPx.current);
+                });
+            }
+        };
+        const onPointerUp = (e) => {
+            if (e.pointerId !== pointerIdRef.current)
+                return;
+            const gutter = gutterRef.current;
+            if (gutter?.hasPointerCapture(e.pointerId)) {
+                gutter.releasePointerCapture(e.pointerId);
+            }
+            if (rafRef.current) {
+                cancelAnimationFrame(rafRef.current);
+                rafRef.current = null;
+            }
+            pointerIdRef.current = null;
+            setIsDragging(false);
+        };
+        document.addEventListener('pointermove', onPointerMove);
+        document.addEventListener('pointerup', onPointerUp);
+        document.addEventListener('pointercancel', onPointerUp);
+        return () => {
+            document.removeEventListener('pointermove', onPointerMove);
+            document.removeEventListener('pointerup', onPointerUp);
+            document.removeEventListener('pointercancel', onPointerUp);
+        };
+    }, [isDragging, clampPx]);
+    const handlePointerDown = (e) => {
+        e.currentTarget.setPointerCapture(e.pointerId);
+        pointerIdRef.current = e.pointerId;
+        setIsDragging(true);
+    };
+    const handleLostPointerCapture = () => {
+        pointerIdRef.current = null;
+        setIsDragging(false);
+        if (rafRef.current) {
+            cancelAnimationFrame(rafRef.current);
+            rafRef.current = null;
+        }
+    };
+    const colTemplate = `${startPx}px ${GUTTER_PX}px minmax(${MIN_PX}px, 1fr)`;
+    const hasHeaders = startHeader != null || endHeader != null;
+    const gutter = (_jsx("div", { ref: gutterRef, className: "relative z-20 isolate flex shrink-0 cursor-col-resize justify-center", onPointerDown: handlePointerDown, onLostPointerCapture: handleLostPointerCapture, children: _jsx("span", { className: "pointer-events-none relative z-10 h-full w-px shrink-0 bg-gray-alpha-400", "aria-hidden": true }) }));
+    if (hasHeaders) {
+        return (_jsxs("div", { className: cn('flex flex-col h-full min-h-0', className), children: [_jsxs("div", { className: "shrink-0 grid", style: { gridTemplateColumns: colTemplate }, children: [_jsx("div", { children: startHeader }), _jsx("div", { className: "flex justify-center", children: _jsx("span", { className: "h-full w-px bg-gray-alpha-400", "aria-hidden": true }) }), _jsx("div", { children: endHeader })] }), _jsxs("div", { ref: containerRef, className: cn('grid flex-1 min-h-0 overflow-x-hidden overflow-y-auto', isDragging && 'select-none'), style: { gridTemplateColumns: colTemplate }, children: [start, gutter, end] })] }));
+    }
+    return (_jsxs("div", { ref: containerRef, className: cn('grid h-full min-h-0 content-start overflow-x-hidden overflow-y-auto', isDragging && 'select-none', className), style: { gridTemplateColumns: colTemplate, height: '100%' }, children: [start, gutter, end] }));
+}
+//# sourceMappingURL=split-pane.js.map

package/dist/components/new-trace-viewer/components/split-pane.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"split-pane.js","sourceRoot":"","sources":["../../../../src/components/new-trace-viewer/components/split-pane.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,EACL,QAAQ,EAGR,WAAW,EACX,SAAS,EACT,MAAM,EACN,QAAQ,GACT,MAAM,OAAO,CAAC;AACf,OAAO,EAAE,EAAE,EAAE,MAAM,oBAAoB,CAAC;AAExC,MAAM,SAAS,GAAG,CAAC,CAAC;AACpB,MAAM,MAAM,GAAG,EAAE,CAAC;AAClB,MAAM,gBAAgB,GAAG,GAAG,CAAC;AAE7B,MAAM,UAAU,OAAO;IACrB,OAAO,mCAAiB,SAAS,EAAC,wCAAwC,GAAG,CAAC;AAChF,CAAC;AAaD,MAAM,UAAU,SAAS,CAAC,EACxB,QAAQ,EACR,SAAS,EACT,iBAAiB,GAAG,gBAAgB,EACpC,WAAW,EACX,SAAS,GACM;IACf,MAAM,KAAK,GAAG,QAAQ,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC;IACzC,IAAI,KAAK,CAAC,MAAM,KAAK,CAAC,EAAE,CAAC;QACvB,MAAM,IAAI,KAAK,CAAC,wCAAwC,CAAC,CAAC;IAC5D,CAAC;IACD,MAAM,CAAC,KAAK,EAAE,GAAG,CAAC,GAAG,KAAK,CAAC;IAE3B,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,CAAC,iBAAiB,CAAC,CAAC;IAC1D,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IACpD,MAAM,YAAY,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IAClD,MAAM,SAAS,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IAC/C,MAAM,MAAM,GAAG,MAAM,CAAgB,IAAI,CAAC,CAAC;IAC3C,MAAM,SAAS,GAAG,MAAM,CAAC,iBAAiB,CAAC,CAAC;IAC5C,MAAM,YAAY,GAAG,MAAM,CAAgB,IAAI,CAAC,CAAC;IAEjD,SAAS,CAAC,GAAG,EAAE;QACb,OAAO,GAAG,EAAE;YACV,IAAI,MAAM,CAAC,OAAO;gBAAE,oBAAoB,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC;QAC3D,CAAC,CAAC;IACJ,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,MAAM,OAAO,GAAG,WAAW,CAAC,CAAC,EAAU,EAAE,EAAE;QACzC,MAAM,EAAE,GAAG,YAAY,CAAC,OAAO,CAAC;QAChC,IAAI,CAAC,EAAE;YAAE,OAAO,EAAE,CAAC;QACnB,MAAM,KAAK,GAAG,EAAE,CAAC,qBAAqB,EAAE,CAAC,KAAK,GAAG,MAAM,GAAG,SAAS,CAAC;QACpE,OAAO,IAAI,CAAC,GAAG,CAAC,KAAK,EAAE,IAAI,CAAC,GAAG,CAAC,MAAM,EAAE,EAAE,CAAC,CAAC,CAAC;IAC/C,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,CAAC,UAAU;YAAE,OAAO;QAExB,MAAM,aAAa,GAAG,CAAC,CAA0B,EAAE,EAAE;YACnD,IAAI,CAAC,CAAC,SAAS,KAAK,YAAY,CAAC,OAAO;gBAAE,OAAO;YACjD,MAAM,SAAS,GAAG,YAAY,CAAC,OAAO,CAAC;YACvC,IAAI,CAAC,SAAS;gBAAE,OAAO;YACvB,MAAM,IAAI,GAAG,SAAS,CAAC,qBAAqB,EAAE,CAAC;YAC/C,SAAS,CAAC,OAAO,GAAG,OAAO,CAAC,CAAC,CAAC,OAAO,GAAG,IAAI,CAAC,IAAI,CAAC,CAAC;YACnD,IAAI,CAAC,MAAM,CAAC,OAAO,EAAE,CAAC;gBACpB,MAAM,CAAC,OAAO,GAAG,qBAAqB,CAAC,GAAG,EAAE;oBAC1C,MAAM,CAAC,OAAO,GAAG,IAAI,CAAC;oBACtB,UAAU,CAAC,SAAS,CAAC,OAAO,CAAC,CAAC;gBAChC,CAAC,CAAC,CAAC;YACL,CAAC;QACH,CAAC,CAAC;QAEF,MAAM,WAAW,GAAG,CAAC,CAA0B,EAAE,EAAE;YACjD,IAAI,CAAC,CAAC,SAAS,KAAK,YAAY,CAAC,OAAO;gBAAE,OAAO;YACjD,MAAM,MAAM,GAAG,SAAS,CAAC,OAAO,CAAC;YACjC,IAAI,MAAM,EAAE,iBAAiB,CAAC,CAAC,CAAC,SAAS,CAAC,EAAE,CAAC;gBAC3C,MAAM,CAAC,qBAAqB,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC;YAC5C,CAAC;YACD,IAAI,MAAM,CAAC,OAAO,EAAE,CAAC;gBACnB,oBAAoB,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC;gBACrC,MAAM,CAAC,OAAO,GAAG,IAAI,CAAC;YACxB,CAAC;YACD,YAAY,CAAC,OAAO,GAAG,IAAI,CAAC;YAC5B,aAAa,CAAC,KAAK,CAAC,CAAC;QACvB,CAAC,CAAC;QAEF,QAAQ,CAAC,gBAAgB,CAAC,aAAa,EAAE,aAAa,CAAC,CAAC;QACxD,QAAQ,CAAC,gBAAgB,CAAC,WAAW,EAAE,WAAW,CAAC,CAAC;QACpD,QAAQ,CAAC,gBAAgB,CAAC,eAAe,EAAE,WAAW,CAAC,CAAC;QAExD,OAAO,GAAG,EAAE;YACV,QAAQ,CAAC,mBAAmB,CAAC,aAAa,EAAE,aAAa,CAAC,CAAC;YAC3D,QAAQ,CAAC,mBAAmB,CAAC,WAAW,EAAE,WAAW,CAAC,CAAC;YACvD,QAAQ,CAAC,mBAAmB,CAAC,eAAe,EAAE,WAAW,CAAC,CAAC;QAC7D,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,UAAU,EAAE,OAAO,CAAC,CAAC,CAAC;IAE1B,MAAM,iBAAiB,GAAG,CAAC,CAAoC,EAAE,EAAE;QACjE,CAAC,CAAC,aAAa,CAAC,iBAAiB,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC;QAC/C,YAAY,CAAC,OAAO,GAAG,CAAC,CAAC,SAAS,CAAC;QACnC,aAAa,CAAC,IAAI,CAAC,CAAC;IACtB,CAAC,CAAC;IAEF,MAAM,wBAAwB,GAAG,GAAG,EAAE;QACpC,YAAY,CAAC,OAAO,GAAG,IAAI,CAAC;QAC5B,aAAa,CAAC,KAAK,CAAC,CAAC;QACrB,IAAI,MAAM,CAAC,OAAO,EAAE,CAAC;YACnB,oBAAoB,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC;YACrC,MAAM,CAAC,OAAO,GAAG,IAAI,CAAC;QACxB,CAAC;IACH,CAAC,CAAC;IAEF,MAAM,WAAW,GAAG,GAAG,OAAO,MAAM,SAAS,aAAa,MAAM,UAAU,CAAC;IAC3E,MAAM,UAAU,GAAG,WAAW,IAAI,IAAI,IAAI,SAAS,IAAI,IAAI,CAAC;IAE5D,MAAM,MAAM,GAAG,CACb,cACE,GAAG,EAAE,SAAS,EACd,SAAS,EAAC,sEAAsE,EAChF,aAAa,EAAE,iBAAiB,EAChC,oBAAoB,EAAE,wBAAwB,YAE9C,eACE,SAAS,EAAC,0EAA0E,wBAEpF,GACE,CACP,CAAC;IAEF,IAAI,UAAU,EAAE,CAAC;QACf,OAAO,CACL,eAAK,SAAS,EAAE,EAAE,CAAC,8BAA8B,EAAE,SAAS,CAAC,aAC3D,eACE,SAAS,EAAC,eAAe,EACzB,KAAK,EAAE,EAAE,mBAAmB,EAAE,WAAW,EAAE,aAE3C,wBAAM,WAAW,GAAO,EACxB,cAAK,SAAS,EAAC,qBAAqB,YAClC,eAAM,SAAS,EAAC,+BAA+B,wBAAe,GAC1D,EACN,wBAAM,SAAS,GAAO,IAClB,EACN,eACE,GAAG,EAAE,YAAY,EACjB,SAAS,EAAE,EAAE,CACX,uDAAuD,EACvD,UAAU,IAAI,aAAa,CAC5B,EACD,KAAK,EAAE,EAAE,mBAAmB,EAAE,WAAW,EAAE,aAE1C,KAAK,EACL,MAAM,EACN,GAAG,IACA,IACF,CACP,CAAC;IACJ,CAAC;IAED,OAAO,CACL,eACE,GAAG,EAAE,YAAY,EACjB,SAAS,EAAE,EAAE,CACX,qEAAqE,EACrE,UAAU,IAAI,aAAa,EAC3B,SAAS,CACV,EACD,KAAK,EAAE,EAAE,mBAAmB,EAAE,WAAW,EAAE,MAAM,EAAE,MAAM,EAAE,aAE1D,KAAK,EACL,MAAM,EACN,GAAG,IACA,CACP,CAAC;AACJ,CAAC","sourcesContent":["'use client';\n\nimport {\n  Children,\n  type ReactNode,\n  type PointerEvent as ReactPointerEvent,\n  useCallback,\n  useEffect,\n  useRef,\n  useState,\n} from 'react';\nimport { cn } from '../../../lib/utils';\n\nconst GUTTER_PX = 1;\nconst MIN_PX = 50;\nconst DEFAULT_START_PX = 340;\n\nexport function Divider() {\n  return <div aria-hidden className=\"h-full w-px shrink-0 bg-gray-alpha-400\" />;\n}\n\nexport interface SplitPaneProps {\n  children: ReactNode;\n  className?: string;\n  /** Fixed pixel width for the start (left) pane. Default 220. */\n  defaultStartWidth?: number;\n  /** Fixed (non-scrolling) header rendered above the start pane. */\n  startHeader?: ReactNode;\n  /** Fixed (non-scrolling) header rendered above the end pane. */\n  endHeader?: ReactNode;\n}\n\nexport function SplitPane({\n  children,\n  className,\n  defaultStartWidth = DEFAULT_START_PX,\n  startHeader,\n  endHeader,\n}: SplitPaneProps) {\n  const parts = Children.toArray(children);\n  if (parts.length !== 2) {\n    throw new Error('SplitPane expects exactly two children');\n  }\n  const [start, end] = parts;\n\n  const [startPx, setStartPx] = useState(defaultStartWidth);\n  const [isDragging, setIsDragging] = useState(false);\n  const containerRef = useRef<HTMLDivElement>(null);\n  const gutterRef = useRef<HTMLDivElement>(null);\n  const rafRef = useRef<number | null>(null);\n  const pendingPx = useRef(defaultStartWidth);\n  const pointerIdRef = useRef<number | null>(null);\n\n  useEffect(() => {\n    return () => {\n      if (rafRef.current) cancelAnimationFrame(rafRef.current);\n    };\n  }, []);\n\n  const clampPx = useCallback((px: number) => {\n    const el = containerRef.current;\n    if (!el) return px;\n    const maxPx = el.getBoundingClientRect().width - MIN_PX - GUTTER_PX;\n    return Math.min(maxPx, Math.max(MIN_PX, px));\n  }, []);\n\n  useEffect(() => {\n    if (!isDragging) return;\n\n    const onPointerMove = (e: globalThis.PointerEvent) => {\n      if (e.pointerId !== pointerIdRef.current) return;\n      const container = containerRef.current;\n      if (!container) return;\n      const rect = container.getBoundingClientRect();\n      pendingPx.current = clampPx(e.clientX - rect.left);\n      if (!rafRef.current) {\n        rafRef.current = requestAnimationFrame(() => {\n          rafRef.current = null;\n          setStartPx(pendingPx.current);\n        });\n      }\n    };\n\n    const onPointerUp = (e: globalThis.PointerEvent) => {\n      if (e.pointerId !== pointerIdRef.current) return;\n      const gutter = gutterRef.current;\n      if (gutter?.hasPointerCapture(e.pointerId)) {\n        gutter.releasePointerCapture(e.pointerId);\n      }\n      if (rafRef.current) {\n        cancelAnimationFrame(rafRef.current);\n        rafRef.current = null;\n      }\n      pointerIdRef.current = null;\n      setIsDragging(false);\n    };\n\n    document.addEventListener('pointermove', onPointerMove);\n    document.addEventListener('pointerup', onPointerUp);\n    document.addEventListener('pointercancel', onPointerUp);\n\n    return () => {\n      document.removeEventListener('pointermove', onPointerMove);\n      document.removeEventListener('pointerup', onPointerUp);\n      document.removeEventListener('pointercancel', onPointerUp);\n    };\n  }, [isDragging, clampPx]);\n\n  const handlePointerDown = (e: ReactPointerEvent<HTMLDivElement>) => {\n    e.currentTarget.setPointerCapture(e.pointerId);\n    pointerIdRef.current = e.pointerId;\n    setIsDragging(true);\n  };\n\n  const handleLostPointerCapture = () => {\n    pointerIdRef.current = null;\n    setIsDragging(false);\n    if (rafRef.current) {\n      cancelAnimationFrame(rafRef.current);\n      rafRef.current = null;\n    }\n  };\n\n  const colTemplate = `${startPx}px ${GUTTER_PX}px minmax(${MIN_PX}px, 1fr)`;\n  const hasHeaders = startHeader != null || endHeader != null;\n\n  const gutter = (\n    <div\n      ref={gutterRef}\n      className=\"relative z-20 isolate flex shrink-0 cursor-col-resize justify-center\"\n      onPointerDown={handlePointerDown}\n      onLostPointerCapture={handleLostPointerCapture}\n    >\n      <span\n        className=\"pointer-events-none relative z-10 h-full w-px shrink-0 bg-gray-alpha-400\"\n        aria-hidden\n      />\n    </div>\n  );\n\n  if (hasHeaders) {\n    return (\n      <div className={cn('flex flex-col h-full min-h-0', className)}>\n        <div\n          className=\"shrink-0 grid\"\n          style={{ gridTemplateColumns: colTemplate }}\n        >\n          <div>{startHeader}</div>\n          <div className=\"flex justify-center\">\n            <span className=\"h-full w-px bg-gray-alpha-400\" aria-hidden />\n          </div>\n          <div>{endHeader}</div>\n        </div>\n        <div\n          ref={containerRef}\n          className={cn(\n            'grid flex-1 min-h-0 overflow-x-hidden overflow-y-auto',\n            isDragging && 'select-none'\n          )}\n          style={{ gridTemplateColumns: colTemplate }}\n        >\n          {start}\n          {gutter}\n          {end}\n        </div>\n      </div>\n    );\n  }\n\n  return (\n    <div\n      ref={containerRef}\n      className={cn(\n        'grid h-full min-h-0 content-start overflow-x-hidden overflow-y-auto',\n        isDragging && 'select-none',\n        className\n      )}\n      style={{ gridTemplateColumns: colTemplate, height: '100%' }}\n    >\n      {start}\n      {gutter}\n      {end}\n    </div>\n  );\n}\n"]}

package/dist/components/new-trace-viewer/components/timeline.d.ts

@@ -0,0 +1,31 @@
+import type { ReactNode } from 'react';
+import type { Span } from '../../trace-viewer/types';
+import type { TimeMarker } from '../utils';
+export declare const TIMELINE_PADDING_PX = 16;
+declare const TimelineBar: import("react").NamedExoticComponent<{
+    span: Span;
+    viewStart: number;
+    viewDuration: number;
+    containerWidth: number;
+    isSelected: boolean;
+    onClick: () => void;
+}>;
+export { TimelineBar };
+export declare function TimelineHeader({ markers, hoverInfo, }: {
+    markers: TimeMarker[];
+    hoverInfo?: {
+        fraction: number;
+        label: string;
+    } | null;
+}): ReactNode;
+export declare function Timeline({ spans, viewStart, viewEnd, markers, selectedId, onSelect, hoverFraction, altHeld, }: {
+    spans: Span[];
+    viewStart: number;
+    viewEnd: number;
+    markers: TimeMarker[];
+    selectedId: string | null;
+    onSelect: (spanId: string) => void;
+    hoverFraction?: number | null;
+    altHeld?: boolean;
+}): ReactNode;
+//# sourceMappingURL=timeline.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"timeline.d.ts","sourceRoot":"","sources":["../../../../src/components/new-trace-viewer/components/timeline.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGvC,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,0BAA0B,CAAC;AAErD,OAAO,KAAK,EAAiB,UAAU,EAAE,MAAM,UAAU,CAAC;AAgC1D,eAAO,MAAM,mBAAmB,KAAK,CAAC;AAoCtC,QAAA,MAAM,WAAW;UAQT,IAAI;eACC,MAAM;kBACH,MAAM;oBACJ,MAAM;gBACV,OAAO;aACV,MAAM,IAAI;EAsJnB,CAAC;AAEH,OAAO,EAAE,WAAW,EAAE,CAAC;AAEvB,wBAAgB,cAAc,CAAC,EAC7B,OAAO,EACP,SAAS,GACV,EAAE;IACD,OAAO,EAAE,UAAU,EAAE,CAAC;IACtB,SAAS,CAAC,EAAE;QAAE,QAAQ,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,GAAG,IAAI,CAAC;CACxD,GAAG,SAAS,CAwBZ;AAED,wBAAgB,QAAQ,CAAC,EACvB,KAAK,EACL,SAAS,EACT,OAAO,EACP,OAAO,EACP,UAAU,EACV,QAAQ,EACR,aAAa,EACb,OAAe,GAChB,EAAE;IACD,KAAK,EAAE,IAAI,EAAE,CAAC;IACd,SAAS,EAAE,MAAM,CAAC;IAClB,OAAO,EAAE,MAAM,CAAC;IAChB,OAAO,EAAE,UAAU,EAAE,CAAC;IACtB,UAAU,EAAE,MAAM,GAAG,IAAI,CAAC;IAC1B,QAAQ,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,aAAa,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC9B,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB,GAAG,SAAS,CAwFZ"}

package/dist/components/new-trace-viewer/components/timeline.js

@@ -0,0 +1,138 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ArrowLeft, ArrowRight } from 'lucide-react';
+import { memo, useEffect, useMemo, useRef, useState } from 'react';
+import { cn } from '../../../lib/utils';
+import { formatDuration, getHighResInMs } from '../../trace-viewer/util/timing';
+import { computeSpanGaps, computeSpanSegments, getSpanDurationMs, getResourceColor, } from '../utils';
+const SEGMENT_CONFIG = {
+    queued: { className: 'bg-gray-500' },
+    retrying: {
+        className: 'box-border bg-gray-500',
+    },
+    waiting: { className: 'bg-gray-500' },
+    running: { className: 'bg-blue-700' },
+    failed: { className: 'bg-red-700' },
+    succeeded: { className: 'bg-green-700' },
+    sleeping: { className: 'bg-gray-500' },
+    received: { className: 'bg-blue-700' },
+};
+const BAR_HEIGHT_PX = 24;
+const TINY_BAR_BOX_SIZE_PX = 24;
+const TINY_BAR_WIDTH_PX = 4;
+const SEGMENT_GAP_PX = 1;
+// Keep this in sync with the rendered row height in the timeline/event list.
+const ROW_HEIGHT = 40;
+const CONTAINER_PAD_Y = 8;
+const END_CAP_HEIGHT = 8;
+export const TIMELINE_PADDING_PX = 16;
+const ORIGIN_MARKER_EPSILON = 0.000001;
+const DeltaIndicator = memo(function DeltaIndicator({ leftFrac, rightFrac, label, rowIndex, }) {
+    const centerY = CONTAINER_PAD_Y + (rowIndex + 1) * ROW_HEIGHT;
+    return (_jsxs("div", { className: "absolute pointer-events-none", style: {
+            left: `${leftFrac * 100}%`,
+            width: `${(rightFrac - leftFrac) * 100}%`,
+            top: centerY - END_CAP_HEIGHT / 2,
+            height: END_CAP_HEIGHT,
+        }, children: [_jsx("div", { className: "absolute left-0 top-0 w-px h-full bg-amber-800" }), _jsx("div", { className: "absolute left-0 right-0 top-1/2 h-px bg-amber-800" }), _jsx("div", { className: "absolute right-0 top-0 w-px h-full bg-amber-800" }), _jsx("span", { className: "absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 text-label-12 leading-none whitespace-nowrap rounded-xs px-1 py-0.5 text-gray-100 bg-amber-800", children: label })] }));
+});
+const TimelineBar = memo(function TimelineBar({ span, viewStart, viewDuration, containerWidth, isSelected, onClick, }) {
+    const startTime = getHighResInMs(span.startTime);
+    const endTime = getHighResInMs(span.endTime);
+    const totalDurationMs = getSpanDurationMs(span);
+    const leftFracRaw = viewDuration > 0 ? (startTime - viewStart) / viewDuration : 0;
+    const rightFracRaw = viewDuration > 0 ? (endTime - viewStart) / viewDuration : 0;
+    const widthFrac = rightFracRaw - leftFracRaw;
+    const leftPct = leftFracRaw * 100;
+    const widthPct = widthFrac * 100;
+    const pixelWidth = widthFrac * containerWidth;
+    const visibleLeftFrac = Math.max(0, Math.min(1, leftFracRaw));
+    const visibleRightFrac = Math.max(0, Math.min(1, rightFracRaw));
+    const visiblePixelWidth = Math.max(0, visibleRightFrac - visibleLeftFrac) * containerWidth;
+    const isTinyBar = containerWidth > 0 && visiblePixelWidth < TINY_BAR_BOX_SIZE_PX;
+    const [isRowHovered, setIsRowHovered] = useState(false);
+    const segments = useMemo(() => computeSpanSegments(span), [span]);
+    const workflowStatus = span.attributes.data
+        ?.status;
+    const isErrored = span.status.code === 2 || workflowStatus === 'failed';
+    const colors = getResourceColor(span.resource);
+    const fallbackColor = isErrored
+        ? (colors.errorBar ?? 'var(--ds-red-700)')
+        : colors.bar;
+    const renderDurationLabel = (label) => (_jsx("span", { className: "pointer-events-none absolute inset-0 flex items-center justify-start overflow-hidden px-1 text-[10px] font-mono font-medium leading-none whitespace-nowrap text-left text-white tabular-nums", style: { textShadow: '0 1px 1px rgba(0, 0, 0, 0.45)' }, children: label }));
+    const getMinDurationLabelWidthPx = (label) => Math.max(40, label.length * 6 + 12);
+    const totalDurationLabel = formatDuration(totalDurationMs);
+    const showBarDurationLabel = isRowHovered &&
+        pixelWidth >= getMinDurationLabelWidthPx(totalDurationLabel);
+    const showBoundaryArrow = isTinyBar && (leftFracRaw < 0 || rightFracRaw > 1);
+    const BoundaryArrow = leftFracRaw < 0.5 ? ArrowLeft : ArrowRight;
+    const barContent = showBoundaryArrow ? (_jsx("div", { className: "flex h-6 w-6 items-center justify-center rounded-[0.25rem]", children: _jsx(BoundaryArrow, { className: "size-3 text-gray-900" }) })) : isTinyBar ? (_jsx("div", { className: "h-6 rounded-[0.25rem]", style: { background: fallbackColor } })) : segments.length > 0 ? (_jsx("div", { className: "relative h-6 w-full", children: segments.map((seg, i) => {
+            const segPixelWidth = (seg.endFraction - seg.startFraction) * pixelWidth;
+            const segDurationLabel = formatDuration((seg.endFraction - seg.startFraction) * totalDurationMs);
+            const showSegmentDurationLabel = isRowHovered &&
+                segPixelWidth >= getMinDurationLabelWidthPx(segDurationLabel);
+            const segStyle = seg.status === 'queued' && segPixelWidth < 20
+                ? { background: 'var(--ds-gray-500)' }
+                : SEGMENT_CONFIG[seg.status].style;
+            return (_jsx("div", { className: cn('absolute h-full rounded-[0.25rem]', SEGMENT_CONFIG[seg.status].className), style: {
+                    left: `calc(${seg.startFraction * 100}% + ${SEGMENT_GAP_PX / 2}px)`,
+                    width: `calc(${(seg.endFraction - seg.startFraction) * 100}% - ${SEGMENT_GAP_PX}px)`,
+                    minWidth: 1,
+                    ...segStyle,
+                }, children: showSegmentDurationLabel
+                    ? renderDurationLabel(segDurationLabel)
+                    : null }, `${seg.status}-${i}`));
+        }) })) : (_jsx("div", { className: "relative h-6 rounded-[0.25rem]", style: {
+            width: '100%',
+            minWidth: 4,
+            background: fallbackColor,
+        }, children: showBarDurationLabel ? renderDurationLabel(totalDurationLabel) : null }));
+    return (_jsx("div", { role: "treeitem", "aria-selected": isSelected, "aria-expanded": isSelected, "aria-level": 1, className: cn('h-10 relative flex items-center hover:bg-gray-100 aria-selected:bg-gray-100 aria-selected:hover:bg-gray-200'), onMouseEnter: () => setIsRowHovered(true), onMouseLeave: () => setIsRowHovered(false), onClick: onClick, children: _jsx("div", { className: "absolute inset-y-0", style: {
+                left: TIMELINE_PADDING_PX,
+                right: TIMELINE_PADDING_PX,
+            }, children: _jsx("div", { className: "absolute top-1/2 -translate-y-1/2", style: {
+                    left: showBoundaryArrow
+                        ? `min(max(${leftPct}%, 0px), calc(100% - ${TINY_BAR_BOX_SIZE_PX}px))`
+                        : isTinyBar
+                            ? `min(${leftPct}%, calc(100% - ${TINY_BAR_WIDTH_PX}px))`
+                            : `${leftPct}%`,
+                    width: showBoundaryArrow
+                        ? `${TINY_BAR_BOX_SIZE_PX}px`
+                        : isTinyBar
+                            ? `${TINY_BAR_WIDTH_PX}px`
+                            : `max(${widthPct}%, 4px)`,
+                    height: BAR_HEIGHT_PX,
+                }, children: barContent }) }) }));
+});
+export { TimelineBar };
+export function TimelineHeader({ markers, hoverInfo, }) {
+    return (_jsx("div", { className: "relative bg-background-100 border-b border-gray-alpha-400 h-10 min-h-10 flex items-end px-4 pb-1", children: _jsxs("div", { className: "relative h-full flex-1", children: [markers.map((m) => (_jsx("span", { className: "absolute bottom-1 font-mono text-xs font-normal leading-4 text-gray-900 whitespace-nowrap", style: { left: `${m.position * 100}%` }, children: m.label }, `${m.position}-${m.label}`))), hoverInfo && (_jsx("span", { className: "absolute top-1 pointer-events-none z-10 font-mono text-[11px] leading-4 text-gray-1000 whitespace-nowrap bg-background-100 border border-gray-alpha-400 rounded px-1 -translate-x-1/2", style: { left: `${hoverInfo.fraction * 100}%` }, children: hoverInfo.label }))] }) }));
+}
+export function Timeline({ spans, viewStart, viewEnd, markers, selectedId, onSelect, hoverFraction, altHeld = false, }) {
+    const containerRef = useRef(null);
+    const [containerWidth, setContainerWidth] = useState(0);
+    const viewDuration = viewEnd - viewStart;
+    const timelineWidth = Math.max(0, containerWidth - TIMELINE_PADDING_PX * 2);
+    useEffect(() => {
+        const el = containerRef.current;
+        if (!el)
+            return;
+        const ro = new ResizeObserver(([entry]) => {
+            setContainerWidth(entry.contentRect.width);
+        });
+        ro.observe(el);
+        return () => ro.disconnect();
+    }, []);
+    const gaps = useMemo(() => computeSpanGaps(spans, viewStart, viewEnd), [spans, viewStart, viewEnd]);
+    return (_jsxs("div", { ref: containerRef, className: "relative h-full overflow-hidden", children: [_jsx("div", { "aria-hidden": true, className: "absolute inset-y-0 pointer-events-none", style: {
+                    left: TIMELINE_PADDING_PX,
+                    right: TIMELINE_PADDING_PX,
+                }, children: markers.map((marker) => Math.abs(marker.value) > ORIGIN_MARKER_EPSILON ? (_jsx("div", { className: "absolute top-0 bottom-0 w-px bg-gray-alpha-300", style: { left: `${marker.position * 100}%` } }, `${marker.position}-${marker.label}`)) : null) }), hoverFraction != null && (_jsx("div", { className: "absolute inset-y-0 pointer-events-none z-10", style: {
+                    left: TIMELINE_PADDING_PX,
+                    right: TIMELINE_PADDING_PX,
+                }, children: _jsx("div", { className: "absolute top-0 bottom-0 w-px bg-gray-alpha-400", style: { left: `${hoverFraction * 100}%` } }) })), spans.map((span) => (_jsx(TimelineBar, { span: span, viewStart: viewStart, viewDuration: viewDuration, containerWidth: timelineWidth, isSelected: selectedId === span.spanId, onClick: () => onSelect(span.spanId) }, span.spanId))), altHeld && (_jsx("div", { "aria-hidden": true, className: "absolute inset-y-0 pointer-events-none", style: {
+                    left: TIMELINE_PADDING_PX,
+                    right: TIMELINE_PADDING_PX,
+                }, children: gaps.map((gap) => (_jsx(DeltaIndicator, { leftFrac: gap.leftFrac, rightFrac: gap.rightFrac, label: formatDuration(gap.gapMs, true), rowIndex: gap.rowIndex }, gap.rowIndex))) }))] }));
+}
+//# sourceMappingURL=timeline.js.map

package/dist/components/new-trace-viewer/components/timeline.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"timeline.js","sourceRoot":"","sources":["../../../../src/components/new-trace-viewer/components/timeline.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,EAAE,SAAS,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAErD,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,OAAO,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACnE,OAAO,EAAE,EAAE,EAAE,MAAM,oBAAoB,CAAC;AAExC,OAAO,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,gCAAgC,CAAC;AAEhF,OAAO,EACL,eAAe,EACf,mBAAmB,EACnB,iBAAiB,EACjB,gBAAgB,GACjB,MAAM,UAAU,CAAC;AAElB,MAAM,cAAc,GAGhB;IACF,MAAM,EAAE,EAAE,SAAS,EAAE,aAAa,EAAE;IACpC,QAAQ,EAAE;QACR,SAAS,EAAE,wBAAwB;KACpC;IACD,OAAO,EAAE,EAAE,SAAS,EAAE,aAAa,EAAE;IACrC,OAAO,EAAE,EAAE,SAAS,EAAE,aAAa,EAAE;IACrC,MAAM,EAAE,EAAE,SAAS,EAAE,YAAY,EAAE;IACnC,SAAS,EAAE,EAAE,SAAS,EAAE,cAAc,EAAE;IACxC,QAAQ,EAAE,EAAE,SAAS,EAAE,aAAa,EAAE;IACtC,QAAQ,EAAE,EAAE,SAAS,EAAE,aAAa,EAAE;CACvC,CAAC;AAEF,MAAM,aAAa,GAAG,EAAE,CAAC;AACzB,MAAM,oBAAoB,GAAG,EAAE,CAAC;AAChC,MAAM,iBAAiB,GAAG,CAAC,CAAC;AAC5B,MAAM,cAAc,GAAG,CAAC,CAAC;AACzB,6EAA6E;AAC7E,MAAM,UAAU,GAAG,EAAE,CAAC;AACtB,MAAM,eAAe,GAAG,CAAC,CAAC;AAC1B,MAAM,cAAc,GAAG,CAAC,CAAC;AACzB,MAAM,CAAC,MAAM,mBAAmB,GAAG,EAAE,CAAC;AACtC,MAAM,qBAAqB,GAAG,QAAQ,CAAC;AAEvC,MAAM,cAAc,GAAG,IAAI,CAAC,SAAS,cAAc,CAAC,EAClD,QAAQ,EACR,SAAS,EACT,KAAK,EACL,QAAQ,GAMT;IACC,MAAM,OAAO,GAAG,eAAe,GAAG,CAAC,QAAQ,GAAG,CAAC,CAAC,GAAG,UAAU,CAAC;IAE9D,OAAO,CACL,eACE,SAAS,EAAC,8BAA8B,EACxC,KAAK,EAAE;YACL,IAAI,EAAE,GAAG,QAAQ,GAAG,GAAG,GAAG;YAC1B,KAAK,EAAE,GAAG,CAAC,SAAS,GAAG,QAAQ,CAAC,GAAG,GAAG,GAAG;YACzC,GAAG,EAAE,OAAO,GAAG,cAAc,GAAG,CAAC;YACjC,MAAM,EAAE,cAAc;SACvB,aAED,cAAK,SAAS,EAAC,gDAAgD,GAAG,EAClE,cAAK,SAAS,EAAC,mDAAmD,GAAG,EACrE,cAAK,SAAS,EAAC,iDAAiD,GAAG,EACnE,eAAM,SAAS,EAAC,4JAA4J,YACzK,KAAK,GACD,IACH,CACP,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,MAAM,WAAW,GAAG,IAAI,CAAC,SAAS,WAAW,CAAC,EAC5C,IAAI,EACJ,SAAS,EACT,YAAY,EACZ,cAAc,EACd,UAAU,EACV,OAAO,GAQR;IACC,MAAM,SAAS,GAAG,cAAc,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;IACjD,MAAM,OAAO,GAAG,cAAc,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;IAC7C,MAAM,eAAe,GAAG,iBAAiB,CAAC,IAAI,CAAC,CAAC;IAEhD,MAAM,WAAW,GACf,YAAY,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,SAAS,GAAG,SAAS,CAAC,GAAG,YAAY,CAAC,CAAC,CAAC,CAAC,CAAC;IAChE,MAAM,YAAY,GAChB,YAAY,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,OAAO,GAAG,SAAS,CAAC,GAAG,YAAY,CAAC,CAAC,CAAC,CAAC,CAAC;IAC9D,MAAM,SAAS,GAAG,YAAY,GAAG,WAAW,CAAC;IAE7C,MAAM,OAAO,GAAG,WAAW,GAAG,GAAG,CAAC;IAClC,MAAM,QAAQ,GAAG,SAAS,GAAG,GAAG,CAAC;IAEjC,MAAM,UAAU,GAAG,SAAS,GAAG,cAAc,CAAC;IAC9C,MAAM,eAAe,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,WAAW,CAAC,CAAC,CAAC;IAC9D,MAAM,gBAAgB,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,YAAY,CAAC,CAAC,CAAC;IAChE,MAAM,iBAAiB,GACrB,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,gBAAgB,GAAG,eAAe,CAAC,GAAG,cAAc,CAAC;IACnE,MAAM,SAAS,GACb,cAAc,GAAG,CAAC,IAAI,iBAAiB,GAAG,oBAAoB,CAAC;IACjE,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAExD,MAAM,QAAQ,GAAG,OAAO,CAAC,GAAG,EAAE,CAAC,mBAAmB,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,CAAC,CAAC;IAElE,MAAM,cAAc,GAAI,IAAI,CAAC,UAAU,CAAC,IAAgC;QACtE,EAAE,MAA4B,CAAC;IACjC,MAAM,SAAS,GAAG,IAAI,CAAC,MAAM,CAAC,IAAI,KAAK,CAAC,IAAI,cAAc,KAAK,QAAQ,CAAC;IACxE,MAAM,MAAM,GAAG,gBAAgB,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;IAC/C,MAAM,aAAa,GAAG,SAAS;QAC7B,CAAC,CAAC,CAAC,MAAM,CAAC,QAAQ,IAAI,mBAAmB,CAAC;QAC1C,CAAC,CAAC,MAAM,CAAC,GAAG,CAAC;IACf,MAAM,mBAAmB,GAAG,CAAC,KAAa,EAAE,EAAE,CAAC,CAC7C,eACE,SAAS,EAAC,8LAA8L,EACxM,KAAK,EAAE,EAAE,UAAU,EAAE,+BAA+B,EAAE,YAErD,KAAK,GACD,CACR,CAAC;IACF,MAAM,0BAA0B,GAAG,CAAC,KAAa,EAAE,EAAE,CACnD,IAAI,CAAC,GAAG,CAAC,EAAE,EAAE,KAAK,CAAC,MAAM,GAAG,CAAC,GAAG,EAAE,CAAC,CAAC;IACtC,MAAM,kBAAkB,GAAG,cAAc,CAAC,eAAe,CAAC,CAAC;IAC3D,MAAM,oBAAoB,GACxB,YAAY;QACZ,UAAU,IAAI,0BAA0B,CAAC,kBAAkB,CAAC,CAAC;IAE/D,MAAM,iBAAiB,GAAG,SAAS,IAAI,CAAC,WAAW,GAAG,CAAC,IAAI,YAAY,GAAG,CAAC,CAAC,CAAC;IAC7E,MAAM,aAAa,GAAG,WAAW,GAAG,GAAG,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,UAAU,CAAC;IACjE,MAAM,UAAU,GAAG,iBAAiB,CAAC,CAAC,CAAC,CACrC,cAAK,SAAS,EAAC,4DAA4D,YACzE,KAAC,aAAa,IAAC,SAAS,EAAC,sBAAsB,GAAG,GAC9C,CACP,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,CACd,cACE,SAAS,EAAC,uBAAuB,EACjC,KAAK,EAAE,EAAE,UAAU,EAAE,aAAa,EAAE,GACpC,CACH,CAAC,CAAC,CAAC,QAAQ,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,CACxB,cAAK,SAAS,EAAC,qBAAqB,YACjC,QAAQ,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,CAAC,EAAE,EAAE;YACvB,MAAM,aAAa,GACjB,CAAC,GAAG,CAAC,WAAW,GAAG,GAAG,CAAC,aAAa,CAAC,GAAG,UAAU,CAAC;YACrD,MAAM,gBAAgB,GAAG,cAAc,CACrC,CAAC,GAAG,CAAC,WAAW,GAAG,GAAG,CAAC,aAAa,CAAC,GAAG,eAAe,CACxD,CAAC;YACF,MAAM,wBAAwB,GAC5B,YAAY;gBACZ,aAAa,IAAI,0BAA0B,CAAC,gBAAgB,CAAC,CAAC;YAChE,MAAM,QAAQ,GACZ,GAAG,CAAC,MAAM,KAAK,QAAQ,IAAI,aAAa,GAAG,EAAE;gBAC3C,CAAC,CAAC,EAAE,UAAU,EAAE,oBAAoB,EAAE;gBACtC,CAAC,CAAC,cAAc,CAAC,GAAG,CAAC,MAAM,CAAC,CAAC,KAAK,CAAC;YAEvC,OAAO,CACL,cAEE,SAAS,EAAE,EAAE,CACX,mCAAmC,EACnC,cAAc,CAAC,GAAG,CAAC,MAAM,CAAC,CAAC,SAAS,CACrC,EACD,KAAK,EAAE;oBACL,IAAI,EAAE,QAAQ,GAAG,CAAC,aAAa,GAAG,GAAG,OAAO,cAAc,GAAG,CAAC,KAAK;oBACnE,KAAK,EAAE,QAAQ,CAAC,GAAG,CAAC,WAAW,GAAG,GAAG,CAAC,aAAa,CAAC,GAAG,GAAG,OAAO,cAAc,KAAK;oBACpF,QAAQ,EAAE,CAAC;oBACX,GAAG,QAAQ;iBACZ,YAEA,wBAAwB;oBACvB,CAAC,CAAC,mBAAmB,CAAC,gBAAgB,CAAC;oBACvC,CAAC,CAAC,IAAI,IAdH,GAAG,GAAG,CAAC,MAAM,IAAI,CAAC,EAAE,CAerB,CACP,CAAC;QACJ,CAAC,CAAC,GACE,CACP,CAAC,CAAC,CAAC,CACF,cACE,SAAS,EAAC,gCAAgC,EAC1C,KAAK,EAAE;YACL,KAAK,EAAE,MAAM;YACb,QAAQ,EAAE,CAAC;YACX,UAAU,EAAE,aAAa;SAC1B,YAEA,oBAAoB,CAAC,CAAC,CAAC,mBAAmB,CAAC,kBAAkB,CAAC,CAAC,CAAC,CAAC,IAAI,GAClE,CACP,CAAC;IAEF,OAAO,CACL,cACE,IAAI,EAAC,UAAU,mBACA,UAAU,mBACV,UAAU,gBACb,CAAC,EACb,SAAS,EAAE,EAAE,CACX,6GAA6G,CAC9G,EACD,YAAY,EAAE,GAAG,EAAE,CAAC,eAAe,CAAC,IAAI,CAAC,EACzC,YAAY,EAAE,GAAG,EAAE,CAAC,eAAe,CAAC,KAAK,CAAC,EAC1C,OAAO,EAAE,OAAO,YAEhB,cACE,SAAS,EAAC,oBAAoB,EAC9B,KAAK,EAAE;gBACL,IAAI,EAAE,mBAAmB;gBACzB,KAAK,EAAE,mBAAmB;aAC3B,YAED,cACE,SAAS,EAAC,mCAAmC,EAC7C,KAAK,EAAE;oBACL,IAAI,EAAE,iBAAiB;wBACrB,CAAC,CAAC,WAAW,OAAO,wBAAwB,oBAAoB,MAAM;wBACtE,CAAC,CAAC,SAAS;4BACT,CAAC,CAAC,OAAO,OAAO,kBAAkB,iBAAiB,MAAM;4BACzD,CAAC,CAAC,GAAG,OAAO,GAAG;oBACnB,KAAK,EAAE,iBAAiB;wBACtB,CAAC,CAAC,GAAG,oBAAoB,IAAI;wBAC7B,CAAC,CAAC,SAAS;4BACT,CAAC,CAAC,GAAG,iBAAiB,IAAI;4BAC1B,CAAC,CAAC,OAAO,QAAQ,SAAS;oBAC9B,MAAM,EAAE,aAAa;iBACtB,YAEA,UAAU,GACP,GACF,GACF,CACP,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,OAAO,EAAE,WAAW,EAAE,CAAC;AAEvB,MAAM,UAAU,cAAc,CAAC,EAC7B,OAAO,EACP,SAAS,GAIV;IACC,OAAO,CACL,cAAK,SAAS,EAAC,kGAAkG,YAC/G,eAAK,SAAS,EAAC,wBAAwB,aACpC,OAAO,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAClB,eAEE,SAAS,EAAC,2FAA2F,EACrG,KAAK,EAAE,EAAE,IAAI,EAAE,GAAG,CAAC,CAAC,QAAQ,GAAG,GAAG,GAAG,EAAE,YAEtC,CAAC,CAAC,KAAK,IAJH,GAAG,CAAC,CAAC,QAAQ,IAAI,CAAC,CAAC,KAAK,EAAE,CAK1B,CACR,CAAC,EACD,SAAS,IAAI,CACZ,eACE,SAAS,EAAC,uLAAuL,EACjM,KAAK,EAAE,EAAE,IAAI,EAAE,GAAG,SAAS,CAAC,QAAQ,GAAG,GAAG,GAAG,EAAE,YAE9C,SAAS,CAAC,KAAK,GACX,CACR,IACG,GACF,CACP,CAAC;AACJ,CAAC;AAED,MAAM,UAAU,QAAQ,CAAC,EACvB,KAAK,EACL,SAAS,EACT,OAAO,EACP,OAAO,EACP,UAAU,EACV,QAAQ,EACR,aAAa,EACb,OAAO,GAAG,KAAK,GAUhB;IACC,MAAM,YAAY,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IAClD,MAAM,CAAC,cAAc,EAAE,iBAAiB,CAAC,GAAG,QAAQ,CAAC,CAAC,CAAC,CAAC;IACxD,MAAM,YAAY,GAAG,OAAO,GAAG,SAAS,CAAC;IACzC,MAAM,aAAa,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,cAAc,GAAG,mBAAmB,GAAG,CAAC,CAAC,CAAC;IAE5E,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,EAAE,GAAG,YAAY,CAAC,OAAO,CAAC;QAChC,IAAI,CAAC,EAAE;YAAE,OAAO;QAChB,MAAM,EAAE,GAAG,IAAI,cAAc,CAAC,CAAC,CAAC,KAAK,CAAC,EAAE,EAAE;YACxC,iBAAiB,CAAC,KAAK,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;QAC7C,CAAC,CAAC,CAAC;QACH,EAAE,CAAC,OAAO,CAAC,EAAE,CAAC,CAAC;QACf,OAAO,GAAG,EAAE,CAAC,EAAE,CAAC,UAAU,EAAE,CAAC;IAC/B,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,MAAM,IAAI,GAAG,OAAO,CAClB,GAAG,EAAE,CAAC,eAAe,CAAC,KAAK,EAAE,SAAS,EAAE,OAAO,CAAC,EAChD,CAAC,KAAK,EAAE,SAAS,EAAE,OAAO,CAAC,CAC5B,CAAC;IAEF,OAAO,CACL,eAAK,GAAG,EAAE,YAAY,EAAE,SAAS,EAAC,iCAAiC,aACjE,mCAEE,SAAS,EAAC,wCAAwC,EAClD,KAAK,EAAE;oBACL,IAAI,EAAE,mBAAmB;oBACzB,KAAK,EAAE,mBAAmB;iBAC3B,YAEA,OAAO,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,EAAE,CACtB,IAAI,CAAC,GAAG,CAAC,MAAM,CAAC,KAAK,CAAC,GAAG,qBAAqB,CAAC,CAAC,CAAC,CAC/C,cAEE,SAAS,EAAC,gDAAgD,EAC1D,KAAK,EAAE,EAAE,IAAI,EAAE,GAAG,MAAM,CAAC,QAAQ,GAAG,GAAG,GAAG,EAAE,IAFvC,GAAG,MAAM,CAAC,QAAQ,IAAI,MAAM,CAAC,KAAK,EAAE,CAGzC,CACH,CAAC,CAAC,CAAC,IAAI,CACT,GACG,EACL,aAAa,IAAI,IAAI,IAAI,CACxB,cACE,SAAS,EAAC,6CAA6C,EACvD,KAAK,EAAE;oBACL,IAAI,EAAE,mBAAmB;oBACzB,KAAK,EAAE,mBAAmB;iBAC3B,YAED,cACE,SAAS,EAAC,gDAAgD,EAC1D,KAAK,EAAE,EAAE,IAAI,EAAE,GAAG,aAAa,GAAG,GAAG,GAAG,EAAE,GAC1C,GACE,CACP,EACA,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CACnB,KAAC,WAAW,IAEV,IAAI,EAAE,IAAI,EACV,SAAS,EAAE,SAAS,EACpB,YAAY,EAAE,YAAY,EAC1B,cAAc,EAAE,aAAa,EAC7B,UAAU,EAAE,UAAU,KAAK,IAAI,CAAC,MAAM,EACtC,OAAO,EAAE,GAAG,EAAE,CAAC,QAAQ,CAAC,IAAI,CAAC,MAAM,CAAC,IAN/B,IAAI,CAAC,MAAM,CAOhB,CACH,CAAC,EACD,OAAO,IAAI,CACV,mCAEE,SAAS,EAAC,wCAAwC,EAClD,KAAK,EAAE;oBACL,IAAI,EAAE,mBAAmB;oBACzB,KAAK,EAAE,mBAAmB;iBAC3B,YAEA,IAAI,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,EAAE,CAAC,CACjB,KAAC,cAAc,IAEb,QAAQ,EAAE,GAAG,CAAC,QAAQ,EACtB,SAAS,EAAE,GAAG,CAAC,SAAS,EACxB,KAAK,EAAE,cAAc,CAAC,GAAG,CAAC,KAAK,EAAE,IAAI,CAAC,EACtC,QAAQ,EAAE,GAAG,CAAC,QAAQ,IAJjB,GAAG,CAAC,QAAQ,CAKjB,CACH,CAAC,GACE,CACP,IACG,CACP,CAAC;AACJ,CAAC","sourcesContent":["'use client';\n\nimport { ArrowLeft, ArrowRight } from 'lucide-react';\nimport type { ReactNode } from 'react';\nimport { memo, useEffect, useMemo, useRef, useState } from 'react';\nimport { cn } from '../../../lib/utils';\nimport type { Span } from '../../trace-viewer/types';\nimport { formatDuration, getHighResInMs } from '../../trace-viewer/util/timing';\nimport type { SegmentStatus, TimeMarker } from '../utils';\nimport {\n  computeSpanGaps,\n  computeSpanSegments,\n  getSpanDurationMs,\n  getResourceColor,\n} from '../utils';\n\nconst SEGMENT_CONFIG: Record<\n  SegmentStatus,\n  { className?: string; style?: React.CSSProperties }\n> = {\n  queued: { className: 'bg-gray-500' },\n  retrying: {\n    className: 'box-border bg-gray-500',\n  },\n  waiting: { className: 'bg-gray-500' },\n  running: { className: 'bg-blue-700' },\n  failed: { className: 'bg-red-700' },\n  succeeded: { className: 'bg-green-700' },\n  sleeping: { className: 'bg-gray-500' },\n  received: { className: 'bg-blue-700' },\n};\n\nconst BAR_HEIGHT_PX = 24;\nconst TINY_BAR_BOX_SIZE_PX = 24;\nconst TINY_BAR_WIDTH_PX = 4;\nconst SEGMENT_GAP_PX = 1;\n// Keep this in sync with the rendered row height in the timeline/event list.\nconst ROW_HEIGHT = 40;\nconst CONTAINER_PAD_Y = 8;\nconst END_CAP_HEIGHT = 8;\nexport const TIMELINE_PADDING_PX = 16;\nconst ORIGIN_MARKER_EPSILON = 0.000001;\n\nconst DeltaIndicator = memo(function DeltaIndicator({\n  leftFrac,\n  rightFrac,\n  label,\n  rowIndex,\n}: {\n  leftFrac: number;\n  rightFrac: number;\n  label: string;\n  rowIndex: number;\n}) {\n  const centerY = CONTAINER_PAD_Y + (rowIndex + 1) * ROW_HEIGHT;\n\n  return (\n    <div\n      className=\"absolute pointer-events-none\"\n      style={{\n        left: `${leftFrac * 100}%`,\n        width: `${(rightFrac - leftFrac) * 100}%`,\n        top: centerY - END_CAP_HEIGHT / 2,\n        height: END_CAP_HEIGHT,\n      }}\n    >\n      <div className=\"absolute left-0 top-0 w-px h-full bg-amber-800\" />\n      <div className=\"absolute left-0 right-0 top-1/2 h-px bg-amber-800\" />\n      <div className=\"absolute right-0 top-0 w-px h-full bg-amber-800\" />\n      <span className=\"absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 text-label-12 leading-none whitespace-nowrap rounded-xs px-1 py-0.5 text-gray-100 bg-amber-800\">\n        {label}\n      </span>\n    </div>\n  );\n});\n\nconst TimelineBar = memo(function TimelineBar({\n  span,\n  viewStart,\n  viewDuration,\n  containerWidth,\n  isSelected,\n  onClick,\n}: {\n  span: Span;\n  viewStart: number;\n  viewDuration: number;\n  containerWidth: number;\n  isSelected: boolean;\n  onClick: () => void;\n}): ReactNode {\n  const startTime = getHighResInMs(span.startTime);\n  const endTime = getHighResInMs(span.endTime);\n  const totalDurationMs = getSpanDurationMs(span);\n\n  const leftFracRaw =\n    viewDuration > 0 ? (startTime - viewStart) / viewDuration : 0;\n  const rightFracRaw =\n    viewDuration > 0 ? (endTime - viewStart) / viewDuration : 0;\n  const widthFrac = rightFracRaw - leftFracRaw;\n\n  const leftPct = leftFracRaw * 100;\n  const widthPct = widthFrac * 100;\n\n  const pixelWidth = widthFrac * containerWidth;\n  const visibleLeftFrac = Math.max(0, Math.min(1, leftFracRaw));\n  const visibleRightFrac = Math.max(0, Math.min(1, rightFracRaw));\n  const visiblePixelWidth =\n    Math.max(0, visibleRightFrac - visibleLeftFrac) * containerWidth;\n  const isTinyBar =\n    containerWidth > 0 && visiblePixelWidth < TINY_BAR_BOX_SIZE_PX;\n  const [isRowHovered, setIsRowHovered] = useState(false);\n\n  const segments = useMemo(() => computeSpanSegments(span), [span]);\n\n  const workflowStatus = (span.attributes.data as Record<string, unknown>)\n    ?.status as string | undefined;\n  const isErrored = span.status.code === 2 || workflowStatus === 'failed';\n  const colors = getResourceColor(span.resource);\n  const fallbackColor = isErrored\n    ? (colors.errorBar ?? 'var(--ds-red-700)')\n    : colors.bar;\n  const renderDurationLabel = (label: string) => (\n    <span\n      className=\"pointer-events-none absolute inset-0 flex items-center justify-start overflow-hidden px-1 text-[10px] font-mono font-medium leading-none whitespace-nowrap text-left text-white tabular-nums\"\n      style={{ textShadow: '0 1px 1px rgba(0, 0, 0, 0.45)' }}\n    >\n      {label}\n    </span>\n  );\n  const getMinDurationLabelWidthPx = (label: string) =>\n    Math.max(40, label.length * 6 + 12);\n  const totalDurationLabel = formatDuration(totalDurationMs);\n  const showBarDurationLabel =\n    isRowHovered &&\n    pixelWidth >= getMinDurationLabelWidthPx(totalDurationLabel);\n\n  const showBoundaryArrow = isTinyBar && (leftFracRaw < 0 || rightFracRaw > 1);\n  const BoundaryArrow = leftFracRaw < 0.5 ? ArrowLeft : ArrowRight;\n  const barContent = showBoundaryArrow ? (\n    <div className=\"flex h-6 w-6 items-center justify-center rounded-[0.25rem]\">\n      <BoundaryArrow className=\"size-3 text-gray-900\" />\n    </div>\n  ) : isTinyBar ? (\n    <div\n      className=\"h-6 rounded-[0.25rem]\"\n      style={{ background: fallbackColor }}\n    />\n  ) : segments.length > 0 ? (\n    <div className=\"relative h-6 w-full\">\n      {segments.map((seg, i) => {\n        const segPixelWidth =\n          (seg.endFraction - seg.startFraction) * pixelWidth;\n        const segDurationLabel = formatDuration(\n          (seg.endFraction - seg.startFraction) * totalDurationMs\n        );\n        const showSegmentDurationLabel =\n          isRowHovered &&\n          segPixelWidth >= getMinDurationLabelWidthPx(segDurationLabel);\n        const segStyle =\n          seg.status === 'queued' && segPixelWidth < 20\n            ? { background: 'var(--ds-gray-500)' }\n            : SEGMENT_CONFIG[seg.status].style;\n\n        return (\n          <div\n            key={`${seg.status}-${i}`}\n            className={cn(\n              'absolute h-full rounded-[0.25rem]',\n              SEGMENT_CONFIG[seg.status].className\n            )}\n            style={{\n              left: `calc(${seg.startFraction * 100}% + ${SEGMENT_GAP_PX / 2}px)`,\n              width: `calc(${(seg.endFraction - seg.startFraction) * 100}% - ${SEGMENT_GAP_PX}px)`,\n              minWidth: 1,\n              ...segStyle,\n            }}\n          >\n            {showSegmentDurationLabel\n              ? renderDurationLabel(segDurationLabel)\n              : null}\n          </div>\n        );\n      })}\n    </div>\n  ) : (\n    <div\n      className=\"relative h-6 rounded-[0.25rem]\"\n      style={{\n        width: '100%',\n        minWidth: 4,\n        background: fallbackColor,\n      }}\n    >\n      {showBarDurationLabel ? renderDurationLabel(totalDurationLabel) : null}\n    </div>\n  );\n\n  return (\n    <div\n      role=\"treeitem\"\n      aria-selected={isSelected}\n      aria-expanded={isSelected}\n      aria-level={1}\n      className={cn(\n        'h-10 relative flex items-center hover:bg-gray-100 aria-selected:bg-gray-100 aria-selected:hover:bg-gray-200'\n      )}\n      onMouseEnter={() => setIsRowHovered(true)}\n      onMouseLeave={() => setIsRowHovered(false)}\n      onClick={onClick}\n    >\n      <div\n        className=\"absolute inset-y-0\"\n        style={{\n          left: TIMELINE_PADDING_PX,\n          right: TIMELINE_PADDING_PX,\n        }}\n      >\n        <div\n          className=\"absolute top-1/2 -translate-y-1/2\"\n          style={{\n            left: showBoundaryArrow\n              ? `min(max(${leftPct}%, 0px), calc(100% - ${TINY_BAR_BOX_SIZE_PX}px))`\n              : isTinyBar\n                ? `min(${leftPct}%, calc(100% - ${TINY_BAR_WIDTH_PX}px))`\n                : `${leftPct}%`,\n            width: showBoundaryArrow\n              ? `${TINY_BAR_BOX_SIZE_PX}px`\n              : isTinyBar\n                ? `${TINY_BAR_WIDTH_PX}px`\n                : `max(${widthPct}%, 4px)`,\n            height: BAR_HEIGHT_PX,\n          }}\n        >\n          {barContent}\n        </div>\n      </div>\n    </div>\n  );\n});\n\nexport { TimelineBar };\n\nexport function TimelineHeader({\n  markers,\n  hoverInfo,\n}: {\n  markers: TimeMarker[];\n  hoverInfo?: { fraction: number; label: string } | null;\n}): ReactNode {\n  return (\n    <div className=\"relative bg-background-100 border-b border-gray-alpha-400 h-10 min-h-10 flex items-end px-4 pb-1\">\n      <div className=\"relative h-full flex-1\">\n        {markers.map((m) => (\n          <span\n            key={`${m.position}-${m.label}`}\n            className=\"absolute bottom-1 font-mono text-xs font-normal leading-4 text-gray-900 whitespace-nowrap\"\n            style={{ left: `${m.position * 100}%` }}\n          >\n            {m.label}\n          </span>\n        ))}\n        {hoverInfo && (\n          <span\n            className=\"absolute top-1 pointer-events-none z-10 font-mono text-[11px] leading-4 text-gray-1000 whitespace-nowrap bg-background-100 border border-gray-alpha-400 rounded px-1 -translate-x-1/2\"\n            style={{ left: `${hoverInfo.fraction * 100}%` }}\n          >\n            {hoverInfo.label}\n          </span>\n        )}\n      </div>\n    </div>\n  );\n}\n\nexport function Timeline({\n  spans,\n  viewStart,\n  viewEnd,\n  markers,\n  selectedId,\n  onSelect,\n  hoverFraction,\n  altHeld = false,\n}: {\n  spans: Span[];\n  viewStart: number;\n  viewEnd: number;\n  markers: TimeMarker[];\n  selectedId: string | null;\n  onSelect: (spanId: string) => void;\n  hoverFraction?: number | null;\n  altHeld?: boolean;\n}): ReactNode {\n  const containerRef = useRef<HTMLDivElement>(null);\n  const [containerWidth, setContainerWidth] = useState(0);\n  const viewDuration = viewEnd - viewStart;\n  const timelineWidth = Math.max(0, containerWidth - TIMELINE_PADDING_PX * 2);\n\n  useEffect(() => {\n    const el = containerRef.current;\n    if (!el) return;\n    const ro = new ResizeObserver(([entry]) => {\n      setContainerWidth(entry.contentRect.width);\n    });\n    ro.observe(el);\n    return () => ro.disconnect();\n  }, []);\n\n  const gaps = useMemo(\n    () => computeSpanGaps(spans, viewStart, viewEnd),\n    [spans, viewStart, viewEnd]\n  );\n\n  return (\n    <div ref={containerRef} className=\"relative h-full overflow-hidden\">\n      <div\n        aria-hidden\n        className=\"absolute inset-y-0 pointer-events-none\"\n        style={{\n          left: TIMELINE_PADDING_PX,\n          right: TIMELINE_PADDING_PX,\n        }}\n      >\n        {markers.map((marker) =>\n          Math.abs(marker.value) > ORIGIN_MARKER_EPSILON ? (\n            <div\n              key={`${marker.position}-${marker.label}`}\n              className=\"absolute top-0 bottom-0 w-px bg-gray-alpha-300\"\n              style={{ left: `${marker.position * 100}%` }}\n            />\n          ) : null\n        )}\n      </div>\n      {hoverFraction != null && (\n        <div\n          className=\"absolute inset-y-0 pointer-events-none z-10\"\n          style={{\n            left: TIMELINE_PADDING_PX,\n            right: TIMELINE_PADDING_PX,\n          }}\n        >\n          <div\n            className=\"absolute top-0 bottom-0 w-px bg-gray-alpha-400\"\n            style={{ left: `${hoverFraction * 100}%` }}\n          />\n        </div>\n      )}\n      {spans.map((span) => (\n        <TimelineBar\n          key={span.spanId}\n          span={span}\n          viewStart={viewStart}\n          viewDuration={viewDuration}\n          containerWidth={timelineWidth}\n          isSelected={selectedId === span.spanId}\n          onClick={() => onSelect(span.spanId)}\n        />\n      ))}\n      {altHeld && (\n        <div\n          aria-hidden\n          className=\"absolute inset-y-0 pointer-events-none\"\n          style={{\n            left: TIMELINE_PADDING_PX,\n            right: TIMELINE_PADDING_PX,\n          }}\n        >\n          {gaps.map((gap) => (\n            <DeltaIndicator\n              key={gap.rowIndex}\n              leftFrac={gap.leftFrac}\n              rightFrac={gap.rightFrac}\n              label={formatDuration(gap.gapMs, true)}\n              rowIndex={gap.rowIndex}\n            />\n          ))}\n        </div>\n      )}\n    </div>\n  );\n}\n"]}

package/dist/components/new-trace-viewer/context.d.ts

@@ -0,0 +1,15 @@
+import { type ReactNode } from 'react';
+import type { Span } from '../trace-viewer/types';
+interface ActiveSpanContextValue {
+    activeSpanId: string | null;
+    activeSpan: Span | null;
+    setActiveSpan: (spanId: string) => void;
+    clearActiveSpan: () => void;
+}
+export declare function ActiveSpanProvider({ spans, children, }: {
+    spans: Span[];
+    children: ReactNode;
+}): import("react/jsx-runtime").JSX.Element;
+export declare const useActiveSpan: () => ActiveSpanContextValue;
+export {};
+//# sourceMappingURL=context.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"context.d.ts","sourceRoot":"","sources":["../../../src/components/new-trace-viewer/context.tsx"],"names":[],"mappings":"AAEA,OAAO,EAEL,KAAK,SAAS,EAMf,MAAM,OAAO,CAAC;AACf,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,uBAAuB,CAAC;AAElD,UAAU,sBAAsB;IAC9B,YAAY,EAAE,MAAM,GAAG,IAAI,CAAC;IAC5B,UAAU,EAAE,IAAI,GAAG,IAAI,CAAC;IACxB,aAAa,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,eAAe,EAAE,MAAM,IAAI,CAAC;CAC7B;AAKD,wBAAgB,kBAAkB,CAAC,EACjC,KAAK,EACL,QAAQ,GACT,EAAE;IACD,KAAK,EAAE,IAAI,EAAE,CAAC;IACd,QAAQ,EAAE,SAAS,CAAC;CACrB,2CAqDA;AAED,eAAO,MAAM,aAAa,QAAO,sBAOhC,CAAC"}

package/dist/components/new-trace-viewer/context.js

@@ -0,0 +1,47 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, useCallback, useContext, useEffect, useMemo, useState, } from 'react';
+const ActiveSpanContext = createContext(null);
+ActiveSpanContext.displayName = 'ActiveSpanContext';
+export function ActiveSpanProvider({ spans, children, }) {
+    const [activeSpanId, setActiveSpanId] = useState(spans[0]?.spanId ?? null);
+    useEffect(() => {
+        setActiveSpanId((currentSpanId) => {
+            if (!currentSpanId) {
+                return null;
+            }
+            const hasCurrentSpan = spans.some((span) => span.spanId === currentSpanId);
+            if (hasCurrentSpan) {
+                return currentSpanId;
+            }
+            return null;
+        });
+    }, [spans]);
+    const activeSpan = useMemo(() => {
+        if (!activeSpanId) {
+            return null;
+        }
+        return spans.find((span) => span.spanId === activeSpanId) ?? null;
+    }, [activeSpanId, spans]);
+    const setActiveSpan = useCallback((spanId) => {
+        setActiveSpanId(spanId);
+    }, []);
+    const clearActiveSpan = useCallback(() => {
+        setActiveSpanId(null);
+    }, []);
+    const value = useMemo(() => ({
+        activeSpanId,
+        activeSpan,
+        setActiveSpan,
+        clearActiveSpan,
+    }), [activeSpanId, activeSpan, setActiveSpan, clearActiveSpan]);
+    return (_jsx(ActiveSpanContext.Provider, { value: value, children: children }));
+}
+export const useActiveSpan = () => {
+    const context = useContext(ActiveSpanContext);
+    if (!context) {
+        throw new Error('useActiveSpan must be used within ActiveSpanProvider');
+    }
+    return context;
+};
+//# sourceMappingURL=context.js.map

package/dist/components/new-trace-viewer/context.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"context.js","sourceRoot":"","sources":["../../../src/components/new-trace-viewer/context.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,EACL,aAAa,EAEb,WAAW,EACX,UAAU,EACV,SAAS,EACT,OAAO,EACP,QAAQ,GACT,MAAM,OAAO,CAAC;AAUf,MAAM,iBAAiB,GAAG,aAAa,CAAgC,IAAI,CAAC,CAAC;AAC7E,iBAAiB,CAAC,WAAW,GAAG,mBAAmB,CAAC;AAEpD,MAAM,UAAU,kBAAkB,CAAC,EACjC,KAAK,EACL,QAAQ,GAIT;IACC,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAG,QAAQ,CAC9C,KAAK,CAAC,CAAC,CAAC,EAAE,MAAM,IAAI,IAAI,CACzB,CAAC;IAEF,SAAS,CAAC,GAAG,EAAE;QACb,eAAe,CAAC,CAAC,aAAa,EAAE,EAAE;YAChC,IAAI,CAAC,aAAa,EAAE,CAAC;gBACnB,OAAO,IAAI,CAAC;YACd,CAAC;YAED,MAAM,cAAc,GAAG,KAAK,CAAC,IAAI,CAC/B,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,MAAM,KAAK,aAAa,CACxC,CAAC;YACF,IAAI,cAAc,EAAE,CAAC;gBACnB,OAAO,aAAa,CAAC;YACvB,CAAC;YAED,OAAO,IAAI,CAAC;QACd,CAAC,CAAC,CAAC;IACL,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;IAEZ,MAAM,UAAU,GAAG,OAAO,CAAC,GAAG,EAAE;QAC9B,IAAI,CAAC,YAAY,EAAE,CAAC;YAClB,OAAO,IAAI,CAAC;QACd,CAAC;QAED,OAAO,KAAK,CAAC,IAAI,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,MAAM,KAAK,YAAY,CAAC,IAAI,IAAI,CAAC;IACpE,CAAC,EAAE,CAAC,YAAY,EAAE,KAAK,CAAC,CAAC,CAAC;IAE1B,MAAM,aAAa,GAAG,WAAW,CAAC,CAAC,MAAc,EAAE,EAAE;QACnD,eAAe,CAAC,MAAM,CAAC,CAAC;IAC1B,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,MAAM,eAAe,GAAG,WAAW,CAAC,GAAG,EAAE;QACvC,eAAe,CAAC,IAAI,CAAC,CAAC;IACxB,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,MAAM,KAAK,GAAG,OAAO,CACnB,GAAG,EAAE,CAAC,CAAC;QACL,YAAY;QACZ,UAAU;QACV,aAAa;QACb,eAAe;KAChB,CAAC,EACF,CAAC,YAAY,EAAE,UAAU,EAAE,aAAa,EAAE,eAAe,CAAC,CAC3D,CAAC;IAEF,OAAO,CACL,KAAC,iBAAiB,CAAC,QAAQ,IAAC,KAAK,EAAE,KAAK,YACrC,QAAQ,GACkB,CAC9B,CAAC;AACJ,CAAC;AAED,MAAM,CAAC,MAAM,aAAa,GAAG,GAA2B,EAAE;IACxD,MAAM,OAAO,GAAG,UAAU,CAAC,iBAAiB,CAAC,CAAC;IAC9C,IAAI,CAAC,OAAO,EAAE,CAAC;QACb,MAAM,IAAI,KAAK,CAAC,sDAAsD,CAAC,CAAC;IAC1E,CAAC;IAED,OAAO,OAAO,CAAC;AACjB,CAAC,CAAC","sourcesContent":["'use client';\n\nimport {\n  createContext,\n  type ReactNode,\n  useCallback,\n  useContext,\n  useEffect,\n  useMemo,\n  useState,\n} from 'react';\nimport type { Span } from '../trace-viewer/types';\n\ninterface ActiveSpanContextValue {\n  activeSpanId: string | null;\n  activeSpan: Span | null;\n  setActiveSpan: (spanId: string) => void;\n  clearActiveSpan: () => void;\n}\n\nconst ActiveSpanContext = createContext<ActiveSpanContextValue | null>(null);\nActiveSpanContext.displayName = 'ActiveSpanContext';\n\nexport function ActiveSpanProvider({\n  spans,\n  children,\n}: {\n  spans: Span[];\n  children: ReactNode;\n}) {\n  const [activeSpanId, setActiveSpanId] = useState<string | null>(\n    spans[0]?.spanId ?? null\n  );\n\n  useEffect(() => {\n    setActiveSpanId((currentSpanId) => {\n      if (!currentSpanId) {\n        return null;\n      }\n\n      const hasCurrentSpan = spans.some(\n        (span) => span.spanId === currentSpanId\n      );\n      if (hasCurrentSpan) {\n        return currentSpanId;\n      }\n\n      return null;\n    });\n  }, [spans]);\n\n  const activeSpan = useMemo(() => {\n    if (!activeSpanId) {\n      return null;\n    }\n\n    return spans.find((span) => span.spanId === activeSpanId) ?? null;\n  }, [activeSpanId, spans]);\n\n  const setActiveSpan = useCallback((spanId: string) => {\n    setActiveSpanId(spanId);\n  }, []);\n\n  const clearActiveSpan = useCallback(() => {\n    setActiveSpanId(null);\n  }, []);\n\n  const value = useMemo<ActiveSpanContextValue>(\n    () => ({\n      activeSpanId,\n      activeSpan,\n      setActiveSpan,\n      clearActiveSpan,\n    }),\n    [activeSpanId, activeSpan, setActiveSpan, clearActiveSpan]\n  );\n\n  return (\n    <ActiveSpanContext.Provider value={value}>\n      {children}\n    </ActiveSpanContext.Provider>\n  );\n}\n\nexport const useActiveSpan = (): ActiveSpanContextValue => {\n  const context = useContext(ActiveSpanContext);\n  if (!context) {\n    throw new Error('useActiveSpan must be used within ActiveSpanProvider');\n  }\n\n  return context;\n};\n"]}

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

@@ -0,0 +1,10 @@
+import type { ReactNode } from 'react';
+import type { Span } from '../trace-viewer/types';
+interface DetailPanelProps {
+    span: Span;
+    rootStart: number;
+    onClose: () => void;
+}
+export declare function DetailPanel({ span, rootStart, onClose, }: DetailPanelProps): ReactNode;
+export {};
+//# sourceMappingURL=detail-panel.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"detail-panel.d.ts","sourceRoot":"","sources":["../../../src/components/new-trace-viewer/detail-panel.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,uBAAuB,CAAC;AAIlD,UAAU,gBAAgB;IACxB,IAAI,EAAE,IAAI,CAAC;IACX,SAAS,EAAE,MAAM,CAAC;IAClB,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB;AAED,wBAAgB,WAAW,CAAC,EAC1B,IAAI,EACJ,SAAS,EACT,OAAO,GACR,EAAE,gBAAgB,GAAG,SAAS,CAuC9B"}

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

@@ -0,0 +1,12 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { X } from 'lucide-react';
+import { formatDuration, getHighResInMs } from '../trace-viewer/util/timing';
+import { getSpanDurationMs } from './utils';
+export function DetailPanel({ span, rootStart, onClose, }) {
+    const startMs = getHighResInMs(span.startTime);
+    const durationMs = getSpanDurationMs(span);
+    const offsetMs = startMs - rootStart;
+    return (_jsxs("aside", { className: "grid h-full max-h-full grid-rows-[2.5rem_1fr] bg-background-200", children: [_jsxs("div", { className: "flex items-center justify-between px-3 border-b border-gray-alpha-400", children: [_jsx("span", { className: "text-sm font-medium text-gray-1000 truncate", children: span.name }), _jsx("button", { type: "button", className: "p-1 rounded-md text-gray-900 hover:text-gray-1000 hover:bg-gray-alpha-200 transition-colors", onClick: onClose, children: _jsx(X, { className: "w-4 h-4" }) })] }), _jsx("div", { className: "overflow-y-auto p-3 space-y-3", children: _jsxs("dl", { className: "grid grid-cols-[auto_1fr] gap-x-3 gap-y-1.5 text-sm", children: [_jsx("dt", { className: "text-gray-900", children: "Resource" }), _jsx("dd", { className: "text-gray-1000 font-mono", children: span.resource }), _jsx("dt", { className: "text-gray-900", children: "Duration" }), _jsx("dd", { className: "text-gray-1000 tabular-nums font-mono", children: formatDuration(durationMs) }), _jsx("dt", { className: "text-gray-900", children: "Offset" }), _jsxs("dd", { className: "text-gray-1000 tabular-nums font-mono", children: ["+", formatDuration(offsetMs)] }), _jsx("dt", { className: "text-gray-900", children: "Status" }), _jsx("dd", { className: "text-gray-1000 font-mono", children: span.status.code === 2 ? 'Error' : 'OK' })] }) })] }));
+}
+//# sourceMappingURL=detail-panel.js.map