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

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

@@ -1,101 +0,0 @@
-const ELLIPSIS = '...';
-const MIN_START = 3;
-const MIN_END = 3;
-const MIN_KEPT = MIN_START + MIN_END;
-const graphemeSegmenter = typeof Intl !== 'undefined' && 'Segmenter' in Intl
-    ? new Intl.Segmenter(undefined, { granularity: 'grapheme' })
-    : null;
-/**
- * Splits a string into grapheme clusters using Intl.Segmenter.
- * Falls back to Array.from for environments without Intl.Segmenter.
- */
-function toGraphemes(text) {
-    if (graphemeSegmenter) {
-        return [...graphemeSegmenter.segment(text)].map((s) => s.segment);
-    }
-    return Array.from(text);
-}
-function buildCandidate(graphemes, kept) {
-    if (kept <= 0) {
-        return {
-            prefixText: '',
-            prefixGraphemeCount: 0,
-            suffixText: '',
-            suffixGraphemeCount: 0,
-            text: ELLIPSIS,
-            truncated: true,
-        };
-    }
-    const suffixGraphemeCount = kept >= MIN_KEPT
-        ? Math.max(MIN_END, Math.floor(kept / 2))
-        : Math.floor(kept / 2);
-    const prefixGraphemeCount = kept - suffixGraphemeCount;
-    const prefixText = graphemes.slice(0, prefixGraphemeCount).join('');
-    const suffixText = suffixGraphemeCount > 0
-        ? graphemes.slice(-suffixGraphemeCount).join('')
-        : '';
-    return {
-        prefixText,
-        prefixGraphemeCount,
-        suffixText,
-        suffixGraphemeCount,
-        text: prefixText + ELLIPSIS + suffixText,
-        truncated: true,
-    };
-}
-/**
- * Middle-truncates a string so `prefix...suffix` fits within `availableWidth`.
- * Uses binary search over grapheme clusters with an injectable measure function.
- */
-function middleTruncate(graphemes, availableWidth, measure, fullWidth) {
-    const fullText = graphemes.join('');
-    const resolvedFullWidth = fullWidth ?? measure(fullText);
-    if (availableWidth <= 0 || graphemes.length === 0) {
-        return {
-            prefixText: fullText,
-            prefixGraphemeCount: graphemes.length,
-            suffixText: '',
-            suffixGraphemeCount: 0,
-            text: fullText,
-            truncated: false,
-        };
-    }
-    if (resolvedFullWidth <= availableWidth) {
-        return {
-            prefixText: fullText,
-            prefixGraphemeCount: graphemes.length,
-            suffixText: '',
-            suffixGraphemeCount: 0,
-            text: fullText,
-            truncated: false,
-        };
-    }
-    // Binary search for the maximum number of kept graphemes
-    let lo = 0;
-    let hi = graphemes.length - 1;
-    let best = -1;
-    while (lo <= hi) {
-        const mid = (lo + hi) >>> 1;
-        const candidate = buildCandidate(graphemes, mid);
-        if (measure(candidate.text) <= availableWidth) {
-            best = mid;
-            lo = mid + 1;
-        }
-        else {
-            hi = mid - 1;
-        }
-    }
-    if (best === -1) {
-        return {
-            prefixText: '',
-            prefixGraphemeCount: 0,
-            suffixText: '',
-            suffixGraphemeCount: 0,
-            text: '',
-            truncated: true,
-        };
-    }
-    return buildCandidate(graphemes, best);
-}
-export { middleTruncate, toGraphemes, ELLIPSIS, MIN_START, MIN_END };
-//# sourceMappingURL=truncate.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"truncate.js","sourceRoot":"","sources":["../../../../../src/components/new-trace-viewer/components/middle-truncate/truncate.ts"],"names":[],"mappings":"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","sourcesContent":["const ELLIPSIS = '...';\nconst MIN_START = 3;\nconst MIN_END = 3;\nconst MIN_KEPT = MIN_START + MIN_END;\nconst graphemeSegmenter =\n  typeof Intl !== 'undefined' && 'Segmenter' in Intl\n    ? new Intl.Segmenter(undefined, { granularity: 'grapheme' })\n    : null;\n\ntype MeasureFn = (text: string) => number;\n\n/**\n * Splits a string into grapheme clusters using Intl.Segmenter.\n * Falls back to Array.from for environments without Intl.Segmenter.\n */\nfunction toGraphemes(text: string): string[] {\n  if (graphemeSegmenter) {\n    return [...graphemeSegmenter.segment(text)].map((s) => s.segment);\n  }\n  return Array.from(text);\n}\n\ninterface TruncateResult {\n  prefixText: string;\n  prefixGraphemeCount: number;\n  suffixText: string;\n  suffixGraphemeCount: number;\n  text: string;\n  truncated: boolean;\n}\n\nfunction buildCandidate(graphemes: string[], kept: number): TruncateResult {\n  if (kept <= 0) {\n    return {\n      prefixText: '',\n      prefixGraphemeCount: 0,\n      suffixText: '',\n      suffixGraphemeCount: 0,\n      text: ELLIPSIS,\n      truncated: true,\n    };\n  }\n\n  const suffixGraphemeCount =\n    kept >= MIN_KEPT\n      ? Math.max(MIN_END, Math.floor(kept / 2))\n      : Math.floor(kept / 2);\n  const prefixGraphemeCount = kept - suffixGraphemeCount;\n  const prefixText = graphemes.slice(0, prefixGraphemeCount).join('');\n  const suffixText =\n    suffixGraphemeCount > 0\n      ? graphemes.slice(-suffixGraphemeCount).join('')\n      : '';\n\n  return {\n    prefixText,\n    prefixGraphemeCount,\n    suffixText,\n    suffixGraphemeCount,\n    text: prefixText + ELLIPSIS + suffixText,\n    truncated: true,\n  };\n}\n\n/**\n * Middle-truncates a string so `prefix...suffix` fits within `availableWidth`.\n * Uses binary search over grapheme clusters with an injectable measure function.\n */\nfunction middleTruncate(\n  graphemes: string[],\n  availableWidth: number,\n  measure: MeasureFn,\n  fullWidth?: number\n): TruncateResult {\n  const fullText = graphemes.join('');\n  const resolvedFullWidth = fullWidth ?? measure(fullText);\n\n  if (availableWidth <= 0 || graphemes.length === 0) {\n    return {\n      prefixText: fullText,\n      prefixGraphemeCount: graphemes.length,\n      suffixText: '',\n      suffixGraphemeCount: 0,\n      text: fullText,\n      truncated: false,\n    };\n  }\n\n  if (resolvedFullWidth <= availableWidth) {\n    return {\n      prefixText: fullText,\n      prefixGraphemeCount: graphemes.length,\n      suffixText: '',\n      suffixGraphemeCount: 0,\n      text: fullText,\n      truncated: false,\n    };\n  }\n\n  // Binary search for the maximum number of kept graphemes\n  let lo = 0;\n  let hi = graphemes.length - 1;\n  let best = -1;\n\n  while (lo <= hi) {\n    const mid = (lo + hi) >>> 1;\n    const candidate = buildCandidate(graphemes, mid);\n\n    if (measure(candidate.text) <= availableWidth) {\n      best = mid;\n      lo = mid + 1;\n    } else {\n      hi = mid - 1;\n    }\n  }\n\n  if (best === -1) {\n    return {\n      prefixText: '',\n      prefixGraphemeCount: 0,\n      suffixText: '',\n      suffixGraphemeCount: 0,\n      text: '',\n      truncated: true,\n    };\n  }\n\n  return buildCandidate(graphemes, best);\n}\n\nexport { middleTruncate, toGraphemes, ELLIPSIS, MIN_START, MIN_END };\nexport type { MeasureFn, TruncateResult };\n"]}

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

@@ -1 +0,0 @@
-{"version":3,"file":"use-middle-truncate.d.ts","sourceRoot":"","sources":["../../../../../src/components/new-trace-viewer/components/middle-truncate/use-middle-truncate.ts"],"names":[],"mappings":"AAsCA;;;;;;;GAOG;AACH,iBAAS,iBAAiB,CAAC,KAAK,EAAE,MAAM,GAAG;IACzC,GAAG,EAAE,KAAK,CAAC,SAAS,CAAC,eAAe,GAAG,IAAI,CAAC,CAAC;IAC7C,UAAU,EAAE,KAAK,CAAC,SAAS,CAAC,eAAe,GAAG,IAAI,CAAC,CAAC;IACpD,WAAW,EAAE,MAAM,CAAC;IACpB,WAAW,EAAE,OAAO,CAAC;IACrB,mBAAmB,EAAE,MAAM,CAAC;IAC5B,UAAU,EAAE,MAAM,CAAC;IACnB,mBAAmB,EAAE,MAAM,CAAC;IAC5B,UAAU,EAAE,MAAM,CAAC;CACpB,CA6GA;AAED,OAAO,EAAE,iBAAiB,EAAE,CAAC"}

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

@@ -1,114 +0,0 @@
-'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

@@ -1 +0,0 @@
-{"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

@@ -1,14 +0,0 @@
-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

@@ -1 +0,0 @@
-{"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

@@ -1,99 +0,0 @@
-'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

@@ -1 +0,0 @@
-{"version":3,"file":"split-pane.js","sourceRoot":"","sources":["../../../../src/components/new-trace-viewer/components/split-pane.tsx"],"names":[],"mappings":"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","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

@@ -1,31 +0,0 @@
-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

@@ -1 +0,0 @@
-{"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

@@ -1,138 +0,0 @@
-'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

@@ -1 +0,0 @@
-{"version":3,"file":"timeline.js","sourceRoot":"","sources":["../../../../src/components/new-trace-viewer/components/timeline.tsx"],"names":[],"mappings":"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","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"]}