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

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=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidXNlLW1pZGRsZS10cnVuY2F0ZS5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uL3NyYy9jb21wb25lbnRzL25ldy10cmFjZS12aWV3ZXIvY29tcG9uZW50cy9taWRkbGUtdHJ1bmNhdGUvdXNlLW1pZGRsZS10cnVuY2F0ZS50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxZQUFZLENBQUM7QUFFYixPQUFPLEVBQ0wsV0FBVyxFQUNYLFNBQVMsRUFDVCxlQUFlLEVBQ2YsT0FBTyxFQUNQLE1BQU0sRUFDTixRQUFRLEdBQ1QsTUFBTSxPQUFPLENBQUM7QUFDZixPQUFPLEVBQUUsY0FBYyxFQUFFLFdBQVcsRUFBRSxNQUFNLFlBQVksQ0FBQztBQUV6RCxNQUFNLHlCQUF5QixHQUM3QixPQUFPLE1BQU0sS0FBSyxXQUFXLENBQUMsQ0FBQyxDQUFDLFNBQVMsQ0FBQyxDQUFDLENBQUMsZUFBZSxDQUFDO0FBVzlELFNBQVMsZUFBZSxDQUN0QixLQUFhLEVBQ2IsU0FBbUI7SUFFbkIsT0FBTztRQUNMLFdBQVcsRUFBRSxLQUFLO1FBQ2xCLFdBQVcsRUFBRSxLQUFLO1FBQ2xCLG1CQUFtQixFQUFFLFNBQVMsQ0FBQyxNQUFNO1FBQ3JDLFVBQVUsRUFBRSxLQUFLO1FBQ2pCLG1CQUFtQixFQUFFLENBQUM7UUFDdEIsVUFBVSxFQUFFLEVBQUU7S0FDZixDQUFDO0FBQ0osQ0FBQztBQUVEOzs7Ozs7O0dBT0c7QUFDSCxTQUFTLGlCQUFpQixDQUFDLEtBQWE7SUFVdEMsTUFBTSxTQUFTLEdBQUcsT0FBTyxDQUFDLEdBQUcsRUFBRSxDQUFDLFdBQVcsQ0FBQyxLQUFLLENBQUMsRUFBRSxDQUFDLEtBQUssQ0FBQyxDQUFDLENBQUM7SUFDN0QsTUFBTSxTQUFTLEdBQUcsT0FBTyxDQUN2QixHQUFHLEVBQUUsQ0FBQyxlQUFlLENBQUMsS0FBSyxFQUFFLFNBQVMsQ0FBQyxFQUN2QyxDQUFDLFNBQVMsRUFBRSxLQUFLLENBQUMsQ0FDbkIs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QUFDLFdBQVc7UUFDOUIsV0FBVyxFQUFFLEtBQUssQ0FBQyxXQUFXO1FBQzlCLG1CQUFtQixFQUFFLEtBQUssQ0FBQyxtQkFBbUI7UUFDOUMsVUFBVSxFQUFFLEtBQUssQ0FBQyxVQUFVO1FBQzVCLG1CQUFtQixFQUFFLEtBQUssQ0FBQyxtQkFBbUI7UUFDOUMsVUFBVSxFQUFFLEtBQUssQ0FBQyxVQUFVO0tBQzdCLENBQUM7QUFDSixDQUFDO0FBRUQsT0FBTyxFQUFFLGlCQUFpQixFQUFFLENBQUMiLCJzb3VyY2VzQ29udGVudCI6WyIndXNlIGNsaWVudCc7XG5cbmltcG9ydCB7XG4gIHVzZUNhbGxiYWNrLFxuICB1c2VFZmZlY3QsXG4gIHVzZUxheW91dEVmZmVjdCxcbiAgdXNlTWVtbyxcbiAgdXNlUmVmLFxuICB1c2VTdGF0ZSxcbn0gZnJvbSAncmVhY3QnO1xuaW1wb3J0IHsgbWlkZGxlVHJ1bmNhdGUsIHRvR3JhcGhlbWVzIH0gZnJvbSAnLi90cnVuY2F0ZSc7XG5cbmNvbnN0IHVzZUlzb21vcnBoaWNMYXlvdXRFZmZlY3QgPVxuICB0eXBlb2Ygd2luZG93ID09PSAndW5kZWZpbmVkJyA/IHVzZUVmZmVjdCA6IHVzZUxheW91dEVmZmVjdDtcblxuaW50ZXJmYWNlIE1pZGRsZVRydW5jYXRlU3RhdGUge1xuICBkaXNwbGF5VGV4dDogc3RyaW5nO1xuICBpc1RydW5jYXRlZDogYm9vbGVhbjtcbiAgcHJlZml4R3JhcGhlbWVDb3VudDogbnVtYmVyO1xuICBwcmVmaXhUZXh0OiBzdHJpbmc7XG4gIHN1ZmZpeEdyYXBoZW1lQ291bnQ6IG51bWJlcjtcbiAgc3VmZml4VGV4dDogc3RyaW5nO1xufVxuXG5mdW5jdGlvbiBjcmVhdGVGdWxsU3RhdGUoXG4gIHZhbHVlOiBzdHJpbmcsXG4gIGdyYXBoZW1lczogc3RyaW5nW11cbik6IE1pZGRsZVRydW5jYXRlU3RhdGUge1xuICByZXR1cm4ge1xuICAgIGRpc3BsYXlUZXh0OiB2YWx1ZSxcbiAgICBpc1RydW5jYXRlZDogZmFsc2UsXG4gICAgcHJlZml4R3JhcGhlbWVDb3VudDogZ3JhcGhlbWVzLmxlbmd0aCxcbiAgICBwcmVmaXhUZXh0OiB2YWx1ZSxcbiAgICBzdWZmaXhHcmFwaGVtZUNvdW50OiAwLFxuICAgIHN1ZmZpeFRleHQ6ICcnLFxuICB9O1xufVxuXG4vKipcbiAqIE1pZGRsZS10cnVuY2F0aW9uIGxvZ2ljLiBSZXR1cm5zIHJlZnMgdG8gYXR0YWNoIHRvIHRoZSBjb250YWluZXIgYW5kIG1lYXN1cmVtZW50IGVsZW1lbnRzLCBwbHVzIHRoZSB0cnVuY2F0ZWQgZGlzcGxheSB0ZXh0LiBSZWNhbGN1bGF0ZXMgb24gcmVzaXplLCBmb250IGxvYWRpbmcsIGFuZCB2YWx1ZSBjaGFuZ2VzLlxuICogUG93ZXJzIHRoZSBgPE1pZGRsZVRydW5jYXRlPmAgKGA8c3Bhbj5gKSBjb21wb25lbnQuXG4gKlxuICogRG9jdW1lbnRhdGlvbjogW0dlaXN0IE1pZGRsZSBUcnVuY2F0ZV0oaHR0cHM6Ly92ZXJjZWwuY29tL2dlaXN0L21pZGRsZS10cnVuY2F0ZSlcbiAqXG4gKiBAcGFyYW0gdmFsdWUgLSBGdWxsIHRleHQgc3RyaW5nIHRvIHRydW5jYXRlLlxuICovXG5mdW5jdGlvbiB1c2VNaWRkbGVUcnVuY2F0ZSh2YWx1ZTogc3RyaW5nKToge1xuICByZWY6IFJlYWN0LlJlZk9iamVjdDxIVE1MU3BhbkVsZW1lbnQgfCBudWxsPjtcbiAgbWVhc3VyZVJlZjogUmVhY3QuUmVmT2JqZWN0PEhUTUxTcGFuRWxlbWVudCB8IG51bGw+O1xuICBkaXNwbGF5VGV4dDogc3RyaW5nO1xuICBpc1RydW5jYXRlZDogYm9vbGVhbjtcbiAgcHJlZml4R3JhcGhlbWVDb3VudDogbnVtYmVyO1xuICBwcmVmaXhUZXh0OiBzdHJpbmc7XG4gIHN1ZmZpeEdyYXBoZW1lQ291bnQ6IG51bWJlcjtcbiAgc3VmZml4VGV4dDogc3RyaW5nO1xufSB7XG4gIGNvbnN0IGdyYXBoZW1lcyA9IHVzZU1lbW8oKCkgPT4gdG9HcmFwaGVtZXModmFsdWUpLCBbdmFsdWVdKTtcbiAgY29uc3QgZnVsbFN0YXRlID0gdXNlTWVtbyhcbiAgICAoKSA9PiBjcmVhdGVGdWxsU3RhdGUodmFsdWUsIGdyYXBoZW1lcyksXG4gICAgW2dyYXBoZW1lcywgdmFsdWVdXG4gICk7XG4gIGNvbnN0IHJlZiA9IHVzZVJlZjxIVE1MU3BhbkVsZW1lbnQgfCBudWxsPihudWxsKTtcbiAgY29uc3QgbWVhc3VyZVJlZiA9IHVzZVJlZjxIVE1MU3BhbkVsZW1lbnQgfCBudWxsPihudWxsKTtcbiAgY29uc3QgW3N0YXRlLCBzZXRTdGF0ZV0gPSB1c2VTdGF0ZTxNaWRkbGVUcnVuY2F0ZVN0YXRlPigoKSA9PiBmdWxsU3RhdGUpO1xuICBjb25zdCByYWZSZWYgPSB1c2VSZWY8bnVtYmVyPigwKTtcblxuICBjb25zdCB1cGRhdGVTdGF0ZSA9IHVzZUNhbGxiYWNrKChuZXh0U3RhdGU6IE1pZGRsZVRydW5jYXRlU3RhdGUpID0+IHtcbiAgICBzZXRTdGF0ZSgoY3VycmVudFN0YXRlKSA9PiB7XG4gICAgICBpZiAoXG4gICAgICAgIGN1cnJlbnRTdGF0ZS5kaXNwbGF5VGV4dCA9PT0gbmV4dFN0YXRlLmRpc3BsYXlUZXh0ICYmXG4gICAgICAgIGN1cnJlbnRTdGF0ZS5pc1RydW5jYXRlZCA9PT0gbmV4dFN0YXRlLmlzVHJ1bmNhdGVkICYmXG4gICAgICAgIGN1cnJlbnRTdGF0ZS5wcmVmaXhUZXh0ID09PSBuZXh0U3RhdGUucHJlZml4VGV4dCAmJlxuICAgICAgICBjdXJyZW50U3RhdGUucHJlZml4R3JhcGhlbWVDb3VudCA9PT0gbmV4dFN0YXRlLnByZWZpeEdyYXBoZW1lQ291bnQgJiZcbiAgICAgICAgY3VycmVudFN0YXRlLnN1ZmZpeFRleHQgPT09IG5leHRTdGF0ZS5zdWZmaXhUZXh0ICYmXG4gICAgICAgIGN1cnJlbnRTdGF0ZS5zdWZmaXhHcmFwaGVtZUNvdW50ID09PSBuZXh0U3RhdGUuc3VmZml4R3JhcGhlbWVDb3VudFxuICAgICAgKSB7XG4gICAgICAgIHJldHVybiBjdXJyZW50U3RhdGU7XG4gICAgICB9XG5cbiAgICAgIHJldHVybiBuZXh0U3RhdGU7XG4gICAgfSk7XG4gIH0sIFtdKTtcblxuICBjb25zdCByZWNhbGN1bGF0ZSA9IHVzZUNhbGxiYWNrKCgpID0+IHtcbiAgICBjb25zdCBlbCA9IHJlZi5jdXJyZW50O1xuICAgIGNvbnN0IG1lYXN1cmVFbCA9IG1lYXN1cmVSZWYuY3VycmVudDtcbiAgICBpZiAoIWVsIHx8ICFtZWFzdXJlRWwpIHJldHVybjtcblxuICAgIGNvbnN0IGF2YWlsYWJsZSA9IGVsLmNsaWVudFdpZHRoO1xuXG4gICAgaWYgKGF2YWlsYWJsZSA8PSAwKSB7XG4gICAgICB1cGRhdGVTdGF0ZShmdWxsU3RhdGUpO1xuICAgICAgcmV0dXJuO1xuICAgIH1cblxuICAgIGNvbnN0IG1lYXN1cmUgPSAodGV4dDogc3RyaW5nKTogbnVtYmVyID0+IHtcbiAgICAgIG1lYXN1cmVFbC50ZXh0Q29udGVudCA9IHRleHQ7XG4gICAgICByZXR1cm4gbWVhc3VyZUVsLnNjcm9sbFdpZHRoO1xuICAgIH07XG5cbiAgICBjb25zdCBmdWxsV2lkdGggPSBtZWFzdXJlKHZhbHVlKTtcblxuICAgIGlmIChmdWxsV2lkdGggPD0gYXZhaWxhYmxlKSB7XG4gICAgICB1cGRhdGVTdGF0ZShmdWxsU3RhdGUpO1xuICAgICAgcmV0dXJuO1xuICAgIH1cblxuICAgIGNvbnN0IHJlc3VsdCA9IG1pZGRsZVRydW5jYXRlKGdyYXBoZW1lcywgYXZhaWxhYmxlLCBtZWFzdXJlLCBmdWxsV2lkdGgpO1xuICAgIHVwZGF0ZVN0YXRlKHtcbiAgICAgIGRpc3BsYXlUZXh0OiByZXN1bHQudGV4dCxcbiAgICAgIGlzVHJ1bmNhdGVkOiByZXN1bHQudHJ1bmNhdGVkLFxuICAgICAgcHJlZml4R3JhcGhlbWVDb3VudDogcmVzdWx0LnByZWZpeEdyYXBoZW1lQ291bnQsXG4gICAgICBwcmVmaXhUZXh0OiByZXN1bHQucHJlZml4VGV4dCxcbiAgICAgIHN1ZmZpeEdyYXBoZW1lQ291bnQ6IHJlc3VsdC5zdWZmaXhHcmFwaGVtZUNvdW50LFxuICAgICAgc3VmZml4VGV4dDogcmVzdWx0LnN1ZmZpeFRleHQsXG4gICAgfSk7XG4gIH0sIFtmdWxsU3RhdGUsIGdyYXBoZW1lcywgdXBkYXRlU3RhdGUsIHZhbHVlXSk7XG5cbiAgLy8gTWVhc3VyZSBvbiBtb3VudCBhbmQgd2hlbiB2YWx1ZSBjaGFuZ2VzIC0gYmVmb3JlIHBhaW50XG4gIHVzZUlzb21vcnBoaWNMYXlvdXRFZmZlY3QoKCkgPT4ge1xuICAgIHJlY2FsY3VsYXRlKCk7XG4gIH0sIFtyZWNhbGN1bGF0ZV0pO1xuXG4gIC8vIFJlc2l6ZU9ic2VydmVyICsgZm9udCBsb2FkaW5nIGZvciBvbmdvaW5nIHJlc3BvbnNpdmVuZXNzXG4gIHVzZUVmZmVjdCgoKSA9PiB7XG4gICAgY29uc3QgZWwgPSByZWYuY3VycmVudDtcbiAgICBpZiAoIWVsKSByZXR1cm47XG5cbiAgICBjb25zdCBkZWJvdW5jZWRSZWNhbGMgPSAoKTogdm9pZCA9PiB7XG4gICAgICBjYW5jZWxBbmltYXRpb25GcmFtZShyYWZSZWYuY3VycmVudCk7XG4gICAgICByYWZSZWYuY3VycmVudCA9IHJlcXVlc3RBbmltYXRpb25GcmFtZShyZWNhbGN1bGF0ZSk7XG4gICAgfTtcblxuICAgIGNvbnN0IHJvID1cbiAgICAgIHR5cGVvZiBSZXNpemVPYnNlcnZlciAhPT0gJ3VuZGVmaW5lZCdcbiAgICAgICAgPyBuZXcgUmVzaXplT2JzZXJ2ZXIoZGVib3VuY2VkUmVjYWxjKVxuICAgICAgICA6IG51bGw7XG4gICAgcm8/Lm9ic2VydmUoZWwpO1xuICAgIHdpbmRvdy5hZGRFdmVudExpc3RlbmVyKCdyZXNpemUnLCBkZWJvdW5jZWRSZWNhbGMpO1xuXG4gICAgY29uc3Qgb25Gb250c0xvYWRlZCA9ICgpOiB2b2lkID0+IHtcbiAgICAgIGRlYm91bmNlZFJlY2FsYygpO1xuICAgIH07XG4gICAgY29uc3QgZm9udFNldCA9ICdmb250cycgaW4gZG9jdW1lbnQgPyBkb2N1bWVudC5mb250cyA6IG51bGw7XG4gICAgZm9udFNldD8uYWRkRXZlbnRMaXN0ZW5lcj8uKCdsb2FkaW5nZG9uZScsIG9uRm9udHNMb2FkZWQpO1xuXG4gICAgcmV0dXJuICgpID0+IHtcbiAgICAgIHJvPy5kaXNjb25uZWN0KCk7XG4gICAgICB3aW5kb3cucmVtb3ZlRXZlbnRMaXN0ZW5lcigncmVzaXplJywgZGVib3VuY2VkUmVjYWxjKTtcbiAgICAgIGNhbmNlbEFuaW1hdGlvbkZyYW1lKHJhZlJlZi5jdXJyZW50KTtcbiAgICAgIGZvbnRTZXQ/LnJlbW92ZUV2ZW50TGlzdGVuZXI/LignbG9hZGluZ2RvbmUnLCBvbkZvbnRzTG9hZGVkKTtcbiAgICB9O1xuICB9LCBbcmVjYWxjdWxhdGVdKTtcblxuICByZXR1cm4ge1xuICAgIHJlZixcbiAgICBtZWFzdXJlUmVmLFxuICAgIGRpc3BsYXlUZXh0OiBzdGF0ZS5kaXNwbGF5VGV4dCxcbiAgICBpc1RydW5jYXRlZDogc3RhdGUuaXNUcnVuY2F0ZWQsXG4gICAgcHJlZml4R3JhcGhlbWVDb3VudDogc3RhdGUucHJlZml4R3JhcGhlbWVDb3VudCxcbiAgICBwcmVmaXhUZXh0OiBzdGF0ZS5wcmVmaXhUZXh0LFxuICAgIHN1ZmZpeEdyYXBoZW1lQ291bnQ6IHN0YXRlLnN1ZmZpeEdyYXBoZW1lQ291bnQsXG4gICAgc3VmZml4VGV4dDogc3RhdGUuc3VmZml4VGV4dCxcbiAgfTtcbn1cblxuZXhwb3J0IHsgdXNlTWlkZGxlVHJ1bmNhdGUgfTtcbiJdfQ==

package/dist/components/new-trace-viewer/components/span-markers.d.ts

@@ -0,0 +1,46 @@
+import type { ReactNode } from 'react';
+import type { SpanMarker } from '../utils';
+export interface VisibleMarker {
+    leftPct: number;
+    /** Absolute (epoch) timestamp in ms — for the tooltip. */
+    timeMs: number;
+}
+/**
+ * Project point-in-time markers onto the visible window `[visibleStartMs,
+ * visibleEndMs]` of a bar, as percentages of that window. Markers outside the
+ * window are dropped.
+ */
+export declare function projectMarkers(markers: SpanMarker[], visibleStartMs: number, visibleEndMs: number): VisibleMarker[];
+/**
+ * Thin out ticks that would visually collide: walk left-to-right and keep each
+ * one unless it sits within MARKER_MIN_GAP_PX of the last kept tick. Well-spaced
+ * markers survive even when a tight cluster elsewhere on the bar gets thinned —
+ * zoom in to resolve a cluster.
+ */
+export declare function cullCollidingMarkers(projected: VisibleMarker[], pixelWidth: number): VisibleMarker[];
+/**
+ * Point-in-time markers overlaid on a bar — one vertical tick per event (hook
+ * resumptions and attribute writes), centered on the bar. Each tick sits inside
+ * a larger hit target and, on hover, shows the shared `TimestampTooltip` card
+ * (the same light Geist card used for every other timestamp in the app, e.g. the
+ * attribute panel and event list) so the time reads consistently with the rest
+ * of the product. The position is clamped a hair inside the bar so an edge
+ * marker never jams the rounded corner.
+ */
+export declare function MarkerLayer({ markers, }: {
+    markers: VisibleMarker[];
+}): ReactNode;
+/**
+ * Edge indicator for markers that have scrolled out of view while zoomed in.
+ * Pinned flush to the corresponding edge of the visible bar, it shows the marker
+ * glyph plus a chevron pointing the way to scroll. The chevron always sits on
+ * the outer (off-screen) side, in a box that lines up with the bare
+ * BoundaryArrow on adjacent rows.
+ */
+export declare function OffscreenMarkerIndicator({ direction, count, targetMs, onReveal, }: {
+    direction: 'left' | 'right';
+    count: number;
+    targetMs: number;
+    onReveal?: (timeMs: number) => void;
+}): ReactNode;
+//# sourceMappingURL=span-markers.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"span-markers.d.ts","sourceRoot":"","sources":["../../../../src/components/new-trace-viewer/components/span-markers.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGvC,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AAM3C,MAAM,WAAW,aAAa;IAC5B,OAAO,EAAE,MAAM,CAAC;IAChB,0DAA0D;IAC1D,MAAM,EAAE,MAAM,CAAC;CAChB;AAED;;;;GAIG;AACH,wBAAgB,cAAc,CAC5B,OAAO,EAAE,UAAU,EAAE,EACrB,cAAc,EAAE,MAAM,EACtB,YAAY,EAAE,MAAM,GACnB,aAAa,EAAE,CAejB;AAKD;;;;;GAKG;AACH,wBAAgB,oBAAoB,CAClC,SAAS,EAAE,aAAa,EAAE,EAC1B,UAAU,EAAE,MAAM,GACjB,aAAa,EAAE,CAUjB;AAeD;;;;;;;;GAQG;AACH,wBAAgB,WAAW,CAAC,EAC1B,OAAO,GACR,EAAE;IACD,OAAO,EAAE,aAAa,EAAE,CAAC;CAC1B,GAAG,SAAS,CAkBZ;AAED;;;;;;GAMG;AACH,wBAAgB,wBAAwB,CAAC,EACvC,SAAS,EACT,KAAK,EACL,QAAQ,EACR,QAAQ,GACT,EAAE;IACD,SAAS,EAAE,MAAM,GAAG,OAAO,CAAC;IAC5B,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;CACrC,GAAG,SAAS,CAyCZ"}

package/dist/components/new-trace-viewer/components/span-markers.js

@@ -0,0 +1,85 @@
+'use client';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { ArrowLeft, ArrowRight } from 'lucide-react';
+import { cn } from '../../../lib/utils';
+import { TimestampTooltip } from '../../ui/timestamp-tooltip';
+/**
+ * Project point-in-time markers onto the visible window `[visibleStartMs,
+ * visibleEndMs]` of a bar, as percentages of that window. Markers outside the
+ * window are dropped.
+ */
+export function projectMarkers(markers, visibleStartMs, visibleEndMs) {
+    const visibleDurationMs = visibleEndMs - visibleStartMs;
+    if (visibleDurationMs <= 0)
+        return [];
+    return markers.flatMap((m) => {
+        if (m.timeMs < visibleStartMs || m.timeMs > visibleEndMs) {
+            return [];
+        }
+        return [
+            {
+                leftPct: ((m.timeMs - visibleStartMs) / visibleDurationMs) * 100,
+                timeMs: m.timeMs,
+            },
+        ];
+    });
+}
+/** Min pixel gap a tick needs from the last-kept one, else it's culled. */
+const MARKER_MIN_GAP_PX = 16;
+/**
+ * Thin out ticks that would visually collide: walk left-to-right and keep each
+ * one unless it sits within MARKER_MIN_GAP_PX of the last kept tick. Well-spaced
+ * markers survive even when a tight cluster elsewhere on the bar gets thinned —
+ * zoom in to resolve a cluster.
+ */
+export function cullCollidingMarkers(projected, pixelWidth) {
+    const kept = [];
+    let lastKeptPct = Number.NEGATIVE_INFINITY;
+    for (const m of projected) {
+        const gapPx = ((m.leftPct - lastKeptPct) / 100) * pixelWidth;
+        if (gapPx < MARKER_MIN_GAP_PX)
+            continue;
+        kept.push(m);
+        lastKeptPct = m.leftPct;
+    }
+    return kept;
+}
+// ---------------------------------------------------------------------------
+// Rendering
+// ---------------------------------------------------------------------------
+/** Marker glyph: a rounded vertical tick (3px wide). */
+function MarkerTick({ className }) {
+    return (_jsx("span", { className: cn('block w-[3px] rounded-full bg-gray-1000', className) }));
+}
+/**
+ * Point-in-time markers overlaid on a bar — one vertical tick per event (hook
+ * resumptions and attribute writes), centered on the bar. Each tick sits inside
+ * a larger hit target and, on hover, shows the shared `TimestampTooltip` card
+ * (the same light Geist card used for every other timestamp in the app, e.g. the
+ * attribute panel and event list) so the time reads consistently with the rest
+ * of the product. The position is clamped a hair inside the bar so an edge
+ * marker never jams the rounded corner.
+ */
+export function MarkerLayer({ markers, }) {
+    return (_jsx(_Fragment, { children: markers.map((m) => (_jsx("span", { className: "pointer-events-auto absolute top-0 bottom-0 z-10 flex w-8 -translate-x-1/2 items-center justify-center", style: { left: `clamp(8px, ${m.leftPct}%, calc(100% - 8px))` }, children: _jsx(TimestampTooltip, { date: m.timeMs, children: _jsx("span", { className: "flex h-6 w-8 items-center justify-center", children: _jsx(MarkerTick, { className: "h-3" }) }) }) }, m.timeMs))) }));
+}
+/**
+ * Edge indicator for markers that have scrolled out of view while zoomed in.
+ * Pinned flush to the corresponding edge of the visible bar, it shows the marker
+ * glyph plus a chevron pointing the way to scroll. The chevron always sits on
+ * the outer (off-screen) side, in a box that lines up with the bare
+ * BoundaryArrow on adjacent rows.
+ */
+export function OffscreenMarkerIndicator({ direction, count, targetMs, onReveal, }) {
+    const Chevron = direction === 'right' ? ArrowRight : ArrowLeft;
+    const label = `${count} marker${count === 1 ? '' : 's'} ${direction === 'right' ? 'ahead' : 'behind'} — click to scroll to ${count === 1 ? 'it' : 'the nearest'}`;
+    const chevron = (_jsx("span", { className: "flex h-6 w-6 shrink-0 items-center justify-center", children: _jsx(Chevron, { className: "size-3 text-gray-900" }) }));
+    const tick = _jsx(MarkerTick, { className: "h-3.5 shrink-0" });
+    return (_jsx("button", { type: "button", "aria-label": label, title: label, onClick: (e) => {
+            // Don't let the row's onClick fire — revealing shouldn't also
+            // change the span selection.
+            e.stopPropagation();
+            onReveal?.(targetMs);
+        }, className: cn('pointer-events-auto absolute top-1/2 z-20 flex h-6 -translate-y-1/2 cursor-pointer items-center rounded-[0.25rem] border border-gray-alpha-400 bg-background-100 shadow-sm hover:bg-gray-100', direction === 'right' ? 'right-0 pl-1.5' : 'left-0 pr-1.5'), children: direction === 'left' ? (_jsxs(_Fragment, { children: [chevron, tick] })) : (_jsxs(_Fragment, { children: [tick, chevron] })) }));
+}
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic3Bhbi1tYXJrZXJzLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vc3JjL2NvbXBvbmVudHMvbmV3LXRyYWNlLXZpZXdlci9jb21wb25lbnRzL3NwYW4tbWFya2Vycy50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsWUFBWSxDQUFDOztBQUViLE9BQU8sRUFBRSxTQUFTLEVBQUUsVUFBVSxFQUFFLE1BQU0sY0FBYyxDQUFDO0FBRXJELE9BQU8sRUFBRSxFQUFFLEVBQUUsTUFBTSxvQkFBb0IsQ0FBQztBQUN4QyxPQUFPLEVBQUUsZ0JBQWdCLEVBQUUsTUFBTSw0QkFBNEIsQ0FBQztBQWE5RDs7OztHQUlHO0FBQ0gsTUFBTSxVQUFVLGNBQWMsQ0FDNUIsT0FBcUIsRUFDckIsY0FBc0IsRUFDdEIsWUFBb0I7SUFFcEIsTUFBTSxpQkFBaUIsR0FBRyxZQUFZLEdBQUcsY0FBYyxDQUFDO0lBQ3hELElBQUksaUJBQWlCLElBQUksQ0FBQztRQUFFLE9BQU8sRUFBRSxDQUFDO0lBRXRDLE9BQU8sT0FBTyxDQUFDLE9BQU8sQ0FBQyxDQUFDLENBQUMsRUFBRSxFQUFFO1FBQzNCLElBQUksQ0FBQyxDQUFDLE1BQU0sR0FBRyxjQUFjLElBQUksQ0FBQyxDQUFDLE1BQU0sR0FBRyxZQUFZLEVBQUUsQ0FBQztZQUN6RCxPQUFPLEVBQUUsQ0FBQztRQUNaLENBQUM7UUFDRCxPQUFPO1lBQ0w7Z0JBQ0UsT0FBTyxFQUFFLENBQUMsQ0FBQyxDQUFDLENBQUMsTUFBTSxHQUFHLGNBQWMsQ0FBQyxHQUFHLGlCQUFpQixDQUFDLEdBQUcsR0FBRztnQkFDaEUsTUFBTSxFQUFFLENBQUMsQ0FBQyxNQUFNO2FBQ2pCO1NBQ0YsQ0FBQztJQUNKLENBQUMsQ0FBQyxDQUFDO0FBQ0wsQ0FBQztBQUVELDJFQUEyRTtBQUMzRSxNQUFNLGlCQUFpQixHQUFHLEVBQUUsQ0FBQztBQUU3Qjs7Ozs7R0FLRztBQUNILE1BQU0sVUFBVSxvQkFBb0IsQ0FDbEMs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LENBQUMsQ0FBQyxDQUFDLGVBQWUsQ0FDM0QsWUFFQSxTQUFTLEtBQUssTUFBTSxDQUFDLENBQUMsQ0FBQyxDQUN0Qiw4QkFDRyxPQUFPLEVBQ1AsSUFBSSxJQUNKLENBQ0osQ0FBQyxDQUFDLENBQUMsQ0FDRiw4QkFDRyxJQUFJLEVBQ0osT0FBTyxJQUNQLENBQ0osR0FDTSxDQUNWLENBQUM7QUFDSixDQUFDIiwic291cmNlc0NvbnRlbnQiOlsiJ3VzZSBjbGllbnQnO1xuXG5pbXBvcnQgeyBBcnJvd0xlZnQsIEFycm93UmlnaHQgfSBmcm9tICdsdWNpZGUtcmVhY3QnO1xuaW1wb3J0IHR5cGUgeyBSZWFjdE5vZGUgfSBmcm9tICdyZWFjdCc7XG5pbXBvcnQgeyBjbiB9IGZyb20gJy4uLy4uLy4uL2xpYi91dGlscyc7XG5pbXBvcnQgeyBUaW1lc3RhbXBUb29sdGlwIH0gZnJvbSAnLi4vLi4vdWkvdGltZXN0YW1wLXRvb2x0aXAnO1xuaW1wb3J0IHR5cGUgeyBTcGFuTWFya2VyIH0gZnJvbSAnLi4vdXRpbHMnO1xuXG4vLyAtLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS1cbi8vIE1hcmtlciBwcm9qZWN0aW9uXG4vLyAtLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS1cblxuZXhwb3J0IGludGVyZmFjZSBWaXNpYmxlTWFya2VyIHtcbiAgbGVmdFBjdDogbnVtYmVyO1xuICAvKiogQWJzb2x1dGUgKGVwb2NoKSB0aW1lc3RhbXAgaW4gbXMg4oCUIGZvciB0aGUgdG9vbHRpcC4gKi9cbiAgdGltZU1zOiBudW1iZXI7XG59XG5cbi8qKlxuICogUHJvamVjdCBwb2ludC1pbi10aW1lIG1hcmtlcnMgb250byB0aGUgdmlzaWJsZSB3aW5kb3cgYFt2aXNpYmxlU3RhcnRNcyxcbiAqIHZpc2libGVFbmRNc11gIG9mIGEgYmFyLCBhcyBwZXJjZW50YWdlcyBvZiB0aGF0IHdpbmRvdy4gTWFya2VycyBvdXRzaWRlIHRoZVxuICogd2luZG93IGFyZSBkcm9wcGVkLlxuICovXG5leHBvcnQgZnVuY3Rpb24gcHJvamVjdE1hcmtlcnMoXG4gIG1hcmtlcnM6IFNwYW5NYXJrZXJbXSxcbiAgdmlzaWJsZVN0YXJ0TXM6IG51bWJlcixcbiAgdmlzaWJsZUVuZE1zOiBudW1iZXJcbik6IFZpc2libGVNYXJrZXJbXSB7XG4gIGNvbnN0IHZpc2libGVEdXJhdGlvbk1zID0gdmlzaWJsZUVuZE1zIC0gdmlzaWJsZVN0YXJ0TXM7XG4gIGlmICh2aXNpYmxlRHVyYXRpb25NcyA8PSAwKSByZXR1cm4gW107XG5cbiAgcmV0dXJuIG1hcmtlcnMuZmxhdE1hcCgobSkgPT4ge1xuICAgIGlmIChtLnRpbWVNcyA8IHZpc2libGVTdGFydE1zIHx8IG0udGltZU1zID4gdmlzaWJsZUVuZE1zKSB7XG4gICAgICByZXR1cm4gW107XG4gICAgfVxuICAgIHJldHVybiBbXG4gICAgICB7XG4gICAgICAgIGxlZnRQY3Q6ICgobS50aW1lTXMgLSB2aXNpYmxlU3RhcnRNcykgLyB2aXNpYmxlRHVyYXRpb25NcykgKiAxMDAsXG4gICAgICAgIHRpbWVNczogbS50aW1lTXMsXG4gICAgICB9LFxuICAgIF07XG4gIH0pO1xufVxuXG4vKiogTWluIHBpeGVsIGdhcCBhIHRpY2sgbmVlZHMgZnJvbSB0aGUgbGFzdC1rZXB0IG9uZSwgZWxzZSBpdCdzIGN1bGxlZC4gKi9cbmNvbnN0IE1BUktFUl9NSU5fR0FQX1BYID0gMTY7XG5cbi8qKlxuICogVGhpbiBvdXQgdGlja3MgdGhhdCB3b3VsZCB2aXN1YWxseSBjb2xsaWRlOiB3YWxrIGxlZnQtdG8tcmlnaHQgYW5kIGtlZXAgZWFjaFxuICogb25lIHVubGVzcyBpdCBzaXRzIHdpdGhpbiBNQVJLRVJfTUlOX0dBUF9QWCBvZiB0aGUgbGFzdCBrZXB0IHRpY2suIFdlbGwtc3BhY2VkXG4gKiBtYXJrZXJzIHN1cnZpdmUgZXZlbiB3aGVuIGEgdGlnaHQgY2x1c3RlciBlbHNld2hlcmUgb24gdGhlIGJhciBnZXRzIHRoaW5uZWQg4oCUXG4gKiB6b29tIGluIHRvIHJlc29sdmUgYSBjbHVzdGVyLlxuICovXG5leHBvcnQgZnVuY3Rpb24gY3VsbENvbGxpZGluZ01hcmtlcnMoXG4gIHByb2plY3RlZDogVmlzaWJsZU1hcmtlcltdLFxuICBwaXhlbFdpZHRoOiBudW1iZXJcbik6IFZpc2libGVNYXJrZXJbXSB7XG4gIGNvbnN0IGtlcHQ6IFZpc2libGVNYXJrZXJbXSA9IFtdO1xuICBsZXQgbGFzdEtlcHRQY3QgPSBOdW1iZXIuTkVHQVRJVkVfSU5GSU5JVFk7XG4gIGZvciAoY29uc3QgbSBvZiBwcm9qZWN0ZWQpIHtcbiAgICBjb25zdCBnYXBQeCA9ICgobS5sZWZ0UGN0IC0gbGFzdEtlcHRQY3QpIC8gMTAwKSAqIHBpeGVsV2lkdGg7XG4gICAgaWYgKGdhcFB4IDwgTUFSS0VSX01JTl9HQVBfUFgpIGNvbnRpbnVlO1xuICAgIGtlcHQucHVzaChtKTtcbiAgICBsYXN0S2VwdFBjdCA9IG0ubGVmdFBjdDtcbiAgfVxuICByZXR1cm4ga2VwdDtcbn1cblxuLy8gLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tXG4vLyBSZW5kZXJpbmdcbi8vIC0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLVxuXG4vKiogTWFya2VyIGdseXBoOiBhIHJvdW5kZWQgdmVydGljYWwgdGljayAoM3B4IHdpZGUpLiAqL1xuZnVuY3Rpb24gTWFya2VyVGljayh7IGNsYXNzTmFtZSB9OiB7IGNsYXNzTmFtZT86IHN0cmluZyB9KTogUmVhY3ROb2RlIHtcbiAgcmV0dXJuIChcbiAgICA8c3BhblxuICAgICAgY2xhc3NOYW1lPXtjbignYmxvY2sgdy1bM3B4XSByb3VuZGVkLWZ1bGwgYmctZ3JheS0xMDAwJywgY2xhc3NOYW1lKX1cbiAgICAvPlxuICApO1xufVxuXG4vKipcbiAqIFBvaW50LWluLXRpbWUgbWFya2VycyBvdmVybGFpZCBvbiBhIGJhciDigJQgb25lIHZlcnRpY2FsIHRpY2sgcGVyIGV2ZW50IChob29rXG4gKiByZXN1bXB0aW9ucyBhbmQgYXR0cmlidXRlIHdyaXRlcyksIGNlbnRlcmVkIG9uIHRoZSBiYXIuIEVhY2ggdGljayBzaXRzIGluc2lkZVxuICogYSBsYXJnZXIgaGl0IHRhcmdldCBhbmQsIG9uIGhvdmVyLCBzaG93cyB0aGUgc2hhcmVkIGBUaW1lc3RhbXBUb29sdGlwYCBjYXJkXG4gKiAodGhlIHNhbWUgbGlnaHQgR2Vpc3QgY2FyZCB1c2VkIGZvciBldmVyeSBvdGhlciB0aW1lc3RhbXAgaW4gdGhlIGFwcCwgZS5nLiB0aGVcbiAqIGF0dHJpYnV0ZSBwYW5lbCBhbmQgZXZlbnQgbGlzdCkgc28gdGhlIHRpbWUgcmVhZHMgY29uc2lzdGVudGx5IHdpdGggdGhlIHJlc3RcbiAqIG9mIHRoZSBwcm9kdWN0LiBUaGUgcG9zaXRpb24gaXMgY2xhbXBlZCBhIGhhaXIgaW5zaWRlIHRoZSBiYXIgc28gYW4gZWRnZVxuICogbWFya2VyIG5ldmVyIGphbXMgdGhlIHJvdW5kZWQgY29ybmVyLlxuICovXG5leHBvcnQgZnVuY3Rpb24gTWFya2VyTGF5ZXIoe1xuICBtYXJrZXJzLFxufToge1xuICBtYXJrZXJzOiBWaXNpYmxlTWFya2VyW107XG59KTogUmVhY3ROb2RlIHtcbiAgcmV0dXJuIChcbiAgICA8PlxuICAgICAge21hcmtlcnMubWFwKChtKSA9PiAoXG4gICAgICAgIDxzcGFuXG4gICAgICAgICAga2V5PXttLnRpbWVNc31cbiAgICAgICAgICBjbGFzc05hbWU9XCJwb2ludGVyLWV2ZW50cy1hdXRvIGFic29sdXRlIHRvcC0wIGJvdHRvbS0wIHotMTAgZmxleCB3LTggLXRyYW5zbGF0ZS14LTEvMiBpdGVtcy1jZW50ZXIganVzdGlmeS1jZW50ZXJcIlxuICAgICAgICAgIHN0eWxlPXt7IGxlZnQ6IGBjbGFtcCg4cHgsICR7bS5sZWZ0UGN0fSUsIGNhbGMoMTAwJSAtIDhweCkpYCB9fVxuICAgICAgICA+XG4gICAgICAgICAgPFRpbWVzdGFtcFRvb2x0aXAgZGF0ZT17bS50aW1lTXN9PlxuICAgICAgICAgICAgPHNwYW4gY2xhc3NOYW1lPVwiZmxleCBoLTYgdy04IGl0ZW1zLWNlbnRlciBqdXN0aWZ5LWNlbnRlclwiPlxuICAgICAgICAgICAgICA8TWFya2VyVGljayBjbGFzc05hbWU9XCJoLTNcIiAvPlxuICAgICAgICAgICAgPC9zcGFuPlxuICAgICAgICAgIDwvVGltZXN0YW1wVG9vbHRpcD5cbiAgICAgICAgPC9zcGFuPlxuICAgICAgKSl9XG4gICAgPC8+XG4gICk7XG59XG5cbi8qKlxuICogRWRnZSBpbmRpY2F0b3IgZm9yIG1hcmtlcnMgdGhhdCBoYXZlIHNjcm9sbGVkIG91dCBvZiB2aWV3IHdoaWxlIHpvb21lZCBpbi5cbiAqIFBpbm5lZCBmbHVzaCB0byB0aGUgY29ycmVzcG9uZGluZyBlZGdlIG9mIHRoZSB2aXNpYmxlIGJhciwgaXQgc2hvd3MgdGhlIG1hcmtlclxuICogZ2x5cGggcGx1cyBhIGNoZXZyb24gcG9pbnRpbmcgdGhlIHdheSB0byBzY3JvbGwuIFRoZSBjaGV2cm9uIGFsd2F5cyBzaXRzIG9uXG4gKiB0aGUgb3V0ZXIgKG9mZi1zY3JlZW4pIHNpZGUsIGluIGEgYm94IHRoYXQgbGluZXMgdXAgd2l0aCB0aGUgYmFyZVxuICogQm91bmRhcnlBcnJvdyBvbiBhZGphY2VudCByb3dzLlxuICovXG5leHBvcnQgZnVuY3Rpb24gT2Zmc2NyZWVuTWFya2VySW5kaWNhdG9yKHtcbiAgZGlyZWN0aW9uLFxuICBjb3VudCxcbiAgdGFyZ2V0TXMsXG4gIG9uUmV2ZWFsLFxufToge1xuICBkaXJlY3Rpb246ICdsZWZ0JyB8ICdyaWdodCc7XG4gIGNvdW50OiBudW1iZXI7XG4gIHRhcmdldE1zOiBudW1iZXI7XG4gIG9uUmV2ZWFsPzogKHRpbWVNczogbnVtYmVyKSA9PiB2b2lkO1xufSk6IFJlYWN0Tm9kZSB7XG4gIGNvbnN0IENoZXZyb24gPSBkaXJlY3Rpb24gPT09ICdyaWdodCcgPyBBcnJvd1JpZ2h0IDogQXJyb3dMZWZ0O1xuICBjb25zdCBsYWJlbCA9IGAke2NvdW50fSBtYXJrZXIke2NvdW50ID09PSAxID8gJycgOiAncyd9ICR7XG4gICAgZGlyZWN0aW9uID09PSAncmlnaHQnID8gJ2FoZWFkJyA6ICdiZWhpbmQnXG4gIH0g4oCUIGNsaWNrIHRvIHNjcm9sbCB0byAke2NvdW50ID09PSAxID8gJ2l0JyA6ICd0aGUgbmVhcmVzdCd9YDtcbiAgY29uc3QgY2hldnJvbiA9IChcbiAgICA8c3BhbiBjbGFzc05hbWU9XCJmbGV4IGgtNiB3LTYgc2hyaW5rLTAgaXRlbXMtY2VudGVyIGp1c3RpZnktY2VudGVyXCI+XG4gICAgICA8Q2hldnJvbiBjbGFzc05hbWU9XCJzaXplLTMgdGV4dC1ncmF5LTkwMFwiIC8+XG4gICAgPC9zcGFuPlxuICApO1xuICBjb25zdCB0aWNrID0gPE1hcmtlclRpY2sgY2xhc3NOYW1lPVwiaC0zLjUgc2hyaW5rLTBcIiAvPjtcblxuICByZXR1cm4gKFxuICAgIDxidXR0b25cbiAgICAgIHR5cGU9XCJidXR0b25cIlxuICAgICAgYXJpYS1sYWJlbD17bGFiZWx9XG4gICAgICB0aXRsZT17bGFiZWx9XG4gICAgICBvbkNsaWNrPXsoZSkgPT4ge1xuICAgICAgICAvLyBEb24ndCBsZXQgdGhlIHJvdydzIG9uQ2xpY2sgZmlyZSDigJQgcmV2ZWFsaW5nIHNob3VsZG4ndCBhbHNvXG4gICAgICAgIC8vIGNoYW5nZSB0aGUgc3BhbiBzZWxlY3Rpb24uXG4gICAgICAgIGUuc3RvcFByb3BhZ2F0aW9uKCk7XG4gICAgICAgIG9uUmV2ZWFsPy4odGFyZ2V0TXMpO1xuICAgICAgfX1cbiAgICAgIGNsYXNzTmFtZT17Y24oXG4gICAgICAgICdwb2ludGVyLWV2ZW50cy1hdXRvIGFic29sdXRlIHRvcC0xLzIgei0yMCBmbGV4IGgtNiAtdHJhbnNsYXRlLXktMS8yIGN1cnNvci1wb2ludGVyIGl0ZW1zLWNlbnRlciByb3VuZGVkLVswLjI1cmVtXSBib3JkZXIgYm9yZGVyLWdyYXktYWxwaGEtNDAwIGJnLWJhY2tncm91bmQtMTAwIHNoYWRvdy1zbSBob3ZlcjpiZy1ncmF5LTEwMCcsXG4gICAgICAgIGRpcmVjdGlvbiA9PT0gJ3JpZ2h0JyA/ICdyaWdodC0wIHBsLTEuNScgOiAnbGVmdC0wIHByLTEuNSdcbiAgICAgICl9XG4gICAgPlxuICAgICAge2RpcmVjdGlvbiA9PT0gJ2xlZnQnID8gKFxuICAgICAgICA8PlxuICAgICAgICAgIHtjaGV2cm9ufVxuICAgICAgICAgIHt0aWNrfVxuICAgICAgICA8Lz5cbiAgICAgICkgOiAoXG4gICAgICAgIDw+XG4gICAgICAgICAge3RpY2t9XG4gICAgICAgICAge2NoZXZyb259XG4gICAgICAgIDwvPlxuICAgICAgKX1cbiAgICA8L2J1dHRvbj5cbiAgKTtcbn1cbiJdfQ==

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

@@ -0,0 +1,15 @@
+import { type ReactNode, type RefObject } 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;
+    scrollContainerRef?: RefObject<HTMLDivElement | null>;
+}
+export declare function SplitPane({ children, className, defaultStartWidth, startHeader, endHeader, scrollContainerRef, }: 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,EAEd,KAAK,SAAS,EAKf,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;IACtB,kBAAkB,CAAC,EAAE,SAAS,CAAC,cAAc,GAAG,IAAI,CAAC,CAAC;CACvD;AAED,wBAAgB,SAAS,CAAC,EACxB,QAAQ,EACR,SAAS,EACT,iBAAoC,EACpC,WAAW,EACX,SAAS,EACT,kBAAkB,GACnB,EAAE,cAAc,2CA4JhB"}

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

@@ -0,0 +1,105 @@
+'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, scrollContainerRef, }) {
+    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 setContainerRef = useCallback((node) => {
+        containerRef.current = node;
+        if (scrollContainerRef) {
+            scrollContainerRef.current = node;
+        }
+    }, [scrollContainerRef]);
+    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: setContainerRef, 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: setContainerRef, 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=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic3BsaXQtcGFuZS5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3NyYy9jb21wb25lbnRzL25ldy10cmFjZS12aWV3ZXIvY29tcG9uZW50cy9zcGxpdC1wYW5lLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxZQUFZLENBQUM7O0FBRWIsT0FBTyxFQUNMLFFBQVEsRUFJUixXQUFXLEVBQ1gsU0FBUyxFQUNULE1BQU0sRUFDTixRQUFRLEdBQ1QsTUFBTSxPQUFPLENBQUM7QUFDZixPQUFPLEVBQUUsRUFBRSxFQUFFLE1BQU0sb0JBQW9CLENBQUM7QUFFeEMsTUFBTSxTQUFTLEdBQUcsQ0FBQyxDQUFDO0FBQ3BCLE1BQU0sTUFBTSxHQUFHLEVBQUUsQ0FBQztBQUNsQixNQUFNLGdCQUFnQixHQUFHLEdBQUcsQ0FBQztBQUU3QixNQUFNLFVBQVUsT0FBTztJQUNyQixPQUFPLG1DQUFpQixTQUFTLEVBQUMsd0NBQXdDLEdBQUcsQ0FBQztBQUNoRixDQUFDO0FBY0QsTUFBTSxVQUFVLFNBQVMsQ0FBQyxFQUN4QixRQUFRLEVBQ1IsU0FBUyxFQUNULGlCQUFpQixHQUFHLGdCQUFnQixFQUNwQyxXQUFXLEVBQ1gsU0FBUyxFQUNULGtCQUFrQixHQUNIO0lBQ2YsTUFBTSxLQUFLLEdBQUcsUUFBUSxDQUFDLE9BQU8sQ0FBQyxRQUFRLENBQUMsQ0FBQztJQUN6QyxJQUFJLEtBQUssQ0FBQyxNQUFNLEtBQUssQ0FBQyxFQUFFLENBQUM7UUFDdkIsTUFBTSxJQUFJLEtBQUssQ0FBQyx3Q0FBd0MsQ0FBQyxDQUFDO0lBQzVELENBQUM7SUFDRCxNQUFNLENBQUMsS0FBSyxFQUFFLEdBQUcsQ0FBQyxHQUFHLEtBQUssQ0FBQztJQUUzQixNQUFNLENBQUMsT0FBTyxFQUFFLFVBQVUsQ0FBQyxHQUFHLFFBQVEsQ0FBQyxpQkFBaUIsQ0FBQyxDQUFDO0lBQzFELE1BQU0sQ0FBQyxVQUFVLEVBQUUsYUFBYSxDQUFDLEdBQUcsUUFBUSxDQUFDLEtBQUssQ0FBQyxDQUFDO0lBQ3BELE1BQU0sWUFBWSxHQUFHLE1BQU0sQ0FBaUIsSUFBSSxDQUFDLENBQUM7SUFDbEQsTUFBTSxTQUFTLEdBQUcsTUFBTSxDQUFpQixJQUFJLENBQUMsQ0FBQztJQUMvQyxNQUFNLE1BQU0sR0FBRyxNQUFNLENBQWdCLElBQUksQ0FBQyxDQUFDO0lBQzNDLE1BQU0sU0FBUyxHQUFHLE1BQU0sQ0FBQyxpQkFBaUIsQ0FBQyxDQUFDO0lBQzVDLE1BQU0sWUFBWSxHQUFHLE1BQU0sQ0FBZ0IsSUFBSSxDQUFDLENBQUM7SUFFakQsU0FBUyxDQUFDLEdBQUcsRUFBRTtRQUNiLE9BQU8sR0FBRyxFQUFFO1lBQ1YsSUFBSSxNQUFNLENBQUMsT0FBTztnQkFBRSxvQkFBb0IsQ0FBQyxNQUFNLENBQUMsT0FBTyxDQUFDLENBQUM7UUFDM0QsQ0FBQyxDQUFDO0lBQ0osQ0FBQyxFQUFFLEVBQUUsQ0FBQyxDQUFDO0lBRVAsTUFBTSxlQUFlLEdBQUcsV0FBVyxDQUNqQyxDQUFDLElBQTJCLEVBQUUsRUFBRTtRQUM5QixZQUFZLENBQUMsT0FBTyxHQUFHLElBQUksQ0FBQztRQUM1QixJQUFJLGtCQUFrQixFQUFFLENBQUM7WUFDdkIsa0JBQWtCLENBQUMsT0FBTyxHQUFHLElBQUksQ0FBQztRQUNwQyxDQUFDO0lBQ0gsQ0FBQyxFQUNELENBQUMsa0JBQWtCLENBQUMsQ0FDckIsQ0FBQztJQUVGLE1BQU0sT0FBTyxHQUFHLFdBQVcsQ0FBQyxDQUFDLEVBQVUsRUFBRSxFQUFFO1FBQ3pDLE1BQU0sRUFBRSxHQUFHLFlBQVksQ0FBQyxPQUFPLENBQUM7UUFDaEMsSUFBSSxDQUFDLEVBQUU7WUFBRSxPQUFPLEVBQUUsQ0FBQztRQUNuQixNQUFNLEtBQUssR0FBRyxFQUFFLENBQUMscUJBQXFCLEVBQUUsQ0FBQyxLQUFLLEdBQUcsTUFBTSxHQUFHLFNBQVMsQ0FBQztRQUNwRSxPQUFPLElBQUksQ0FBQyxHQUFHLENBQUMsS0FBSyxFQUFFLElBQUksQ0FBQyxHQUFHLENBQUMsTUFBTSxFQUFFLEVBQUUsQ0FBQyxDQUFDLENBQUM7SUFDL0MsQ0FBQyxFQUFFLEVBQUUsQ0FBQyxDQUFDO0lBRVAsU0FBUyxDQUFDLEdBQUcsRUFBRTtRQUNiLElBQUksQ0FBQyxVQUFVO1lBQUUsT0FBTztRQUV4QixNQUFNLGFBQWEsR0FBRyxDQUFDLENBQTBCLEVBQUUsRUFBRTtZQUNuRCxJQUFJLENBQUMsQ0FBQyxTQUFTLEtBQUssWUFBWSxDQUFDLE9BQU87Z0JBQUUsT0FBTztZQUNqRCxNQUFNLFNBQVMsR0FBRyxZQUFZLENBQUMsT0FBTyxDQUFDO1lBQ3ZDLElBQUksQ0FBQyxTQUFTO2dCQUFFLE9BQU87WUFDdkIsTUFBTSxJQUFJLEdBQUcsU0FBUyxDQUFDLHFCQUFxQixFQUFFLENBQUM7WUFDL0MsU0FBUyxDQUFDLE9BQU8sR0FBRyxPQUFPLENBQUMsQ0FBQyxDQUFDLE9BQU8sR0FBRyxJQUFJLENBQUMsSUFBSSxDQUFDLENBQUM7WUFDbkQsSUFBSSxDQUFDLE1BQU0sQ0FBQyxPQUFPLEVBQUUsQ0FBQztnQkFDcEIsTUFBTSxDQUFDLE9BQU8sR0FBRyxxQkFBcUIsQ0FBQyxHQUFHLEVBQUU7b0JBQzFDLE1BQU0sQ0FBQyxPQUFPLEdBQUcsSUFBSSxDQUFDO29CQUN0QixVQUFVLENBQUMsU0FBUyxDQUFDLE9BQU8sQ0FBQyxDQUFDO2dCQUNoQyxDQUFDLENBQUMsQ0FBQztZQUNMLENBQUM7UUFDSCxDQUFDLENBQUM7UUFFRixNQUFNLFdBQVcsR0FBRyxDQUFDLENBQTBCLEVBQUUsRUFBRTtZQUNqRCxJQUFJLENBQUMsQ0FBQyxTQUFTLEtBQUssWUFBWSxDQUFDLE9BQU87Z0JBQUUsT0FBTztZQUNqRCxNQUFNLE1BQU0sR0FBRyxTQUFTLENBQUMsT0FBTyxDQUFDO1lBQ2pDLElBQUksTUFBTSxFQUFFLGlCQUFpQixDQUFDLENBQUMsQ0FBQyxTQUFTLENBQUMsRUFBRSxDQUFDO2dCQUMzQyxNQUFNLENBQUMscUJBQXFCLENBQUMsQ0FBQyxDQUFDLFNBQVMsQ0FBQyxDQUFDO1lBQzVDLENBQUM7WUFDRCxJQUFJLE1BQU0sQ0FBQyxPQUFPLEVBQUUsQ0FBQztnQkFDbkIsb0JBQW9CLENBQUMsTUFBTSxDQUFDLE9BQU8sQ0FBQyxDQUFDO2dCQUNyQyxNQUFNLENBQUMsT0FBTyxHQUFHLElBQUksQ0FBQztZQUN4QixDQUFDO1lBQ0QsWUFBWSxDQUFDLE9BQU8sR0FBRyxJQUFJLENBQUM7WUFDNUIsYUFBYSxDQUFDLEtBQUssQ0FBQyxDQUFDO1FBQ3ZCLENBQUMsQ0FBQztRQUVGLFFBQVEsQ0FBQyxnQkFBZ0IsQ0FBQyxhQUFhLEVBQUUsYUFBYSxDQUFDLENBQUM7UUFDeEQsUUFBUSxDQUFDLGdCQUFnQixDQUFDLFdBQVcsRUFBRSxXQUFXLENBQUMsQ0FBQztRQUNwRCxRQUFRLENBQUMsZ0JBQWdCLENBQUMsZUFBZSxFQUFFLFdBQVcsQ0FBQyxDQUFDO1FBRXhELE9BQU8sR0FBRyxFQUFFO1lBQ1YsUUFBUSxDQUFDLG1CQUFtQixDQUFDLGFBQWEsRUFBRSxhQUFhLENBQUMsQ0FBQztZQUMzRCxRQUFRLENBQUMsbUJBQW1CLENBQUMsV0FBVyxFQUFFLFdBQVcsQ0FBQyxDQUFDO1lBQ3ZELFFBQVEsQ0FBQyxtQkFBbUIsQ0FBQyxlQUFlLEVBQUUsV0FBVyxDQUFDLENBQUM7UUFDN0QsQ0FBQyxDQUFDO0lBQ0osQ0FBQyxFQUFFLENBQUMsVUFBVSxFQUFFLE9BQU8sQ0FBQyxDQUFDLENBQUM7SUFFMUIsTUFBTSxpQkFBaUIsR0FBRyxDQUFDLENBQW9DLEVBQUUsRUFBRTtRQUNqRSxDQUFDLENBQUMsYUFBYSxDQUFDLGlCQUFpQixDQUFDLENBQUMsQ0FBQyxTQUFTLENBQUMsQ0FBQztRQUMvQyxZQUFZLENBQUMsT0FBTyxHQUFHLENBQUMsQ0FBQyxTQUFTLENBQUM7UUFDbkMsYUFBYSxDQUFDLElBQUksQ0FBQyxDQUFDO0lBQ3RCLENBQUMsQ0FBQztJQUVGLE1BQU0sd0JBQXdCLEdBQUcsR0FBRyxFQUFFO1FBQ3BDLFlBQVksQ0FBQyxPQUFPLEdBQUcsSUFBSSxDQUFDO1FBQzVCLGFBQWEsQ0FBQyxLQUFLLENBQUMsQ0FBQztRQUNyQixJQUFJLE1BQU0sQ0FBQyxPQUFPLEVBQUUsQ0FBQztZQUNuQixvQkFBb0IsQ0FBQyxNQUFNLENBQUMsT0FBTyxDQUFDLENBQUM7WUFDckMsTUFBTSxDQUFDLE9BQU8sR0FBRyxJQUFJLENBQUM7UUFDeEIsQ0FBQztJQUNILENBQUMsQ0FBQztJQUVGLE1BQU0sV0FBVyxHQUFHLEdBQUcsT0FBTyxNQUFNLFNBQVMsYUFBYSxNQUFNLFVBQVUsQ0FBQztJQUMzRSxNQUFNLFVBQVUsR0FBRyxXQUFXLElBQUksSUFBSSxJQUFJLFNBQVMsSUFBSSxJQUFJLENBQUM7SUFFNUQsTUFBTSxNQUFNLEdBQUcsQ0FDYixjQUNFLEdBQUcsRUFBRSxTQUFTLEVBQ2QsU0FBUyxFQUFDLHNFQUFzRSxFQUNoRixhQUFhLEVBQUUsaUJBQWlCLEVBQ2hDLG9CQUFvQixFQUFFLHdCQUF3QixZQUU5QyxlQUNFLFNBQVMsRUFBQywwRUFBMEUsd0JBRXBGLEdBQ0UsQ0FDUCxDQUFDO0lBRUYsSUFBSSxVQUFVLEVBQUUsQ0FBQztRQUNmLE9BQU8sQ0FDTCxlQUFLLFNBQVMsRUFBRSxFQUFFLENBQUMsOEJBQThCLEVBQUUsU0FBUyxDQUFDLGFBQzNELGVBQ0UsU0FBUyxFQUFDLGVBQWUsRUFDekIsS0FBSyxFQUFFLEVBQUUsbUJBQW1CLEVBQUUsV0FBVyxFQUFFLGFBRTNDLHdCQUFNLFdBQVcsR0FBTyxFQUN4QixjQUFLLFNBQVMsRUFBQyxxQkFBcUIsWUFDbEMsZUFBTSxTQUFTLEVBQUMsK0JBQStCLHdCQUFlLEdBQzFELEVBQ04sd0JBQU0sU0FBUyxHQUFPLElBQ2xCLEVBQ04sZUFDRSxHQUFHLEVBQUUsZUFBZSxFQUNwQixTQUFTLEVBQUUsRUFBRSxDQUNYLHVEQUF1RCxFQUN2RCxVQUFVLElBQUksYUFBYSxDQUM1QixFQUNELEtBQUssRUFBRSxFQUFFLG1CQUFtQixFQUFFLFdBQVcsRUFBRSxhQUUxQyxLQUFLLEVBQ0wsTUFBTSxFQUNOLEdBQUcsSUFDQSxJQUNGLENBQ1AsQ0FBQztJQUNKLENBQUM7SUFFRCxPQUFPLENBQ0wsZUFDRSxHQUFHLEVBQUUsZUFBZSxFQUNwQixTQUFTLEVBQUUsRUFBRSxDQUNYLHFFQUFxRSxFQUNyRSxVQUFVLElBQUksYUFBYSxFQUMzQixTQUFTLENBQ1YsRUFDRCxLQUFLLEVBQUUsRUFBRSxtQkFBbUIsRUFBRSxXQUFXLEVBQUUsTUFBTSxFQUFFLE1BQU0sRUFBRSxhQUUxRCxLQUFLLEVBQ0wsTUFBTSxFQUNOLEdBQUcsSUFDQSxDQUNQLENBQUM7QUFDSixDQUFDIiwic291cmNlc0NvbnRlbnQiOlsiJ3VzZSBjbGllbnQnO1xuXG5pbXBvcnQge1xuICBDaGlsZHJlbixcbiAgdHlwZSBSZWFjdE5vZGUsXG4gIHR5cGUgUG9pbnRlckV2ZW50IGFzIFJlYWN0UG9pbnRlckV2ZW50LFxuICB0eXBlIFJlZk9iamVjdCxcbiAgdXNlQ2FsbGJhY2ssXG4gIHVzZUVmZmVjdCxcbiAgdXNlUmVmLFxuICB1c2VTdGF0ZSxcbn0gZnJvbSAncmVhY3QnO1xuaW1wb3J0IHsgY24gfSBmcm9tICcuLi8uLi8uLi9saWIvdXRpbHMnO1xuXG5jb25zdCBHVVRURVJfUFggPSAxO1xuY29uc3QgTUlOX1BYID0gNTA7XG5jb25zdCBERUZBVUxUX1NUQVJUX1BYID0gMzQwO1xuXG5leHBvcnQgZnVuY3Rpb24gRGl2aWRlcigpIHtcbiAgcmV0dXJuIDxkaXYgYXJpYS1oaWRkZW4gY2xhc3NOYW1lPVwiaC1mdWxsIHctcHggc2hyaW5rLTAgYmctZ3JheS1hbHBoYS00MDBcIiAvPjtcbn1cblxuZXhwb3J0IGludGVyZmFjZSBTcGxpdFBhbmVQcm9wcyB7XG4gIGNoaWxkcmVuOiBSZWFjdE5vZGU7XG4gIGNsYXNzTmFtZT86IHN0cmluZztcbiAgLyoqIEZpeGVkIHBpeGVsIHdpZHRoIGZvciB0aGUgc3RhcnQgKGxlZnQpIHBhbmUuIERlZmF1bHQgMjIwLiAqL1xuICBkZWZhdWx0U3RhcnRXaWR0aD86IG51bWJlcjtcbiAgLyoqIEZpeGVkIChub24tc2Nyb2xsaW5nKSBoZWFkZXIgcmVuZGVyZWQgYWJvdmUgdGhlIHN0YXJ0IHBhbmUuICovXG4gIHN0YXJ0SGVhZGVyPzogUmVhY3ROb2RlO1xuICAvKiogRml4ZWQgKG5vbi1zY3JvbGxpbmcpIGhlYWRlciByZW5kZXJlZCBhYm92ZSB0aGUgZW5kIHBhbmUuICovXG4gIGVuZEhlYWRlcj86IFJlYWN0Tm9kZTtcbiAgc2Nyb2xsQ29udGFpbmVyUmVmPzogUmVmT2JqZWN0PEhUTUxEaXZFbGVtZW50IHwgbnVsbD47XG59XG5cbmV4cG9ydCBmdW5jdGlvbiBTcGxpdFBhbmUoe1xuICBjaGlsZHJlbixcbiAgY2xhc3NOYW1lLFxuICBkZWZhdWx0U3RhcnRXaWR0aCA9IERFRkFVTFRfU1RBUlRfUFgsXG4gIHN0YXJ0SGVhZGVyLFxuICBlbmRIZWFkZXIsXG4gIHNjcm9sbENvbnRhaW5lclJlZixcbn06IFNwbGl0UGFuZVByb3BzKSB7XG4gIGNvbnN0IHBhcnRzID0gQ2hpbGRyZW4udG9BcnJheShjaGlsZHJlbik7XG4gIGlmIChwYXJ0cy5sZW5ndGggIT09IDIpIHtcbiAgICB0aHJvdyBuZXcgRXJyb3IoJ1NwbGl0UGFuZSBleHBlY3RzIGV4YWN0bHkgdHdvIGNoaWxkcmVuJyk7XG4gIH1cbiAgY29uc3QgW3N0YXJ0LCBlbmRdID0gcGFydHM7XG5cbiAgY29uc3QgW3N0YXJ0UHgsIHNldFN0YXJ0UHhdID0gdXNlU3RhdGUoZGVmYXVsdFN0YXJ0V2lkdGgpO1xuICBjb25zdCBbaXNEcmFnZ2luZywgc2V0SXNEcmFnZ2luZ10gPSB1c2VTdGF0ZShmYWxzZSk7XG4gIGNvbnN0IGNvbnRhaW5lclJlZiA9IHVzZVJlZjxIVE1MRGl2RWxlbWVudD4obnVsbCk7XG4gIGNvbnN0IGd1dHRlclJlZiA9IHVzZVJlZjxIVE1MRGl2RWxlbWVudD4obnVsbCk7XG4gIGNvbnN0IHJhZlJlZiA9IHVzZVJlZjxudW1iZXIgfCBudWxsPihudWxsKTtcbiAgY29uc3QgcGVuZGluZ1B4ID0gdXNlUmVmKGRlZmF1bHRTdGFydFdpZHRoKTtcbiAgY29uc3QgcG9pbnRlcklkUmVmID0gdXNlUmVmPG51bWJlciB8IG51bGw+KG51bGwpO1xuXG4gIHVzZUVmZmVjdCgoKSA9PiB7XG4gICAgcmV0dXJuICgpID0+IHtcbiAgICAgIGlmIChyYWZSZWYuY3VycmVudCkgY2FuY2VsQW5pbWF0aW9uRnJhbWUocmFmUmVmLmN1cnJlbnQpO1xuICAgIH07XG4gIH0sIFtdKTtcblxuICBjb25zdCBzZXRDb250YWluZXJSZWYgPSB1c2VDYWxsYmFjayhcbiAgICAobm9kZTogSFRNTERpdkVsZW1lbnQgfCBudWxsKSA9PiB7XG4gICAgICBjb250YWluZXJSZWYuY3VycmVudCA9IG5vZGU7XG4gICAgICBpZiAoc2Nyb2xsQ29udGFpbmVyUmVmKSB7XG4gICAgICAgIHNjcm9sbENvbnRhaW5lclJlZi5jdXJyZW50ID0gbm9kZTtcbiAgICAgIH1cbiAgICB9LFxuICAgIFtzY3JvbGxDb250YWluZXJSZWZdXG4gICk7XG5cbiAgY29uc3QgY2xhbXBQeCA9IHVzZUNhbGxiYWNrKChweDogbnVtYmVyKSA9PiB7XG4gICAgY29uc3QgZWwgPSBjb250YWluZXJSZWYuY3VycmVudDtcbiAgICBpZiAoIWVsKSByZXR1cm4gcHg7XG4gICAgY29uc3QgbWF4UHggPSBlbC5nZXRCb3VuZGluZ0NsaWVudFJlY3QoKS53aWR0aCAtIE1JTl9QWCAtIEdVVFRFUl9QWDtcbiAgICByZXR1cm4gTWF0aC5taW4obWF4UHgsIE1hdGgubWF4KE1JTl9QWCwgcHgpKTtcbiAgfSwgW10pO1xuXG4gIHVzZUVmZmVjdCgoKSA9PiB7XG4gICAgaWYgKCFpc0RyYWdnaW5nKSByZXR1cm47XG5cbiAgICBjb25zdCBvblBvaW50ZXJNb3ZlID0gKGU6IGdsb2JhbFRoaXMuUG9pbnRlckV2ZW50KSA9PiB7XG4gICAgICBpZiAoZS5wb2ludGVySWQgIT09IHBvaW50ZXJJZFJlZi5jdXJyZW50KSByZXR1cm47XG4gICAgICBjb25zdCBjb250YWluZXIgPSBjb250YWluZXJSZWYuY3VycmVudDtcbiAgICAgIGlmICghY29udGFpbmVyKSByZXR1cm47XG4gICAgICBjb25zdCByZWN0ID0gY29udGFpbmVyLmdldEJvdW5kaW5nQ2xpZW50UmVjdCgpO1xuICAgICAgcGVuZGluZ1B4LmN1cnJlbnQgPSBjbGFtcFB4KGUuY2xpZW50WCAtIHJlY3QubGVmdCk7XG4gICAgICBpZiAoIXJhZlJlZi5jdXJyZW50KSB7XG4gICAgICAgIHJhZlJlZi5jdXJyZW50ID0gcmVxdWVzdEFuaW1hdGlvbkZyYW1lKCgpID0+IHtcbiAgICAgICAgICByYWZSZWYuY3VycmVudCA9IG51bGw7XG4gICAgICAgICAgc2V0U3RhcnRQeChwZW5kaW5nUHguY3VycmVudCk7XG4gICAgICAgIH0pO1xuICAgICAgfVxuICAgIH07XG5cbiAgICBjb25zdCBvblBvaW50ZXJVcCA9IChlOiBnbG9iYWxUaGlzLlBvaW50ZXJFdmVudCkgPT4ge1xuICAgICAgaWYgKGUucG9pbnRlcklkICE9PSBwb2ludGVySWRSZWYuY3VycmVudCkgcmV0dXJuO1xuICAgICAgY29uc3QgZ3V0dGVyID0gZ3V0dGVyUmVmLmN1cnJlbnQ7XG4gICAgICBpZiAoZ3V0dGVyPy5oYXNQb2ludGVyQ2FwdHVyZShlLnBvaW50ZXJJZCkpIHtcbiAgICAgICAgZ3V0dGVyLnJlbGVhc2VQb2ludGVyQ2FwdHVyZShlLnBvaW50ZXJJZCk7XG4gICAgICB9XG4gICAgICBpZiAocmFmUmVmLmN1cnJlbnQpIHtcbiAgICAgICAgY2FuY2VsQW5pbWF0aW9uRnJhbWUocmFmUmVmLmN1cnJlbnQpO1xuICAgICAgICByYWZSZWYuY3VycmVudCA9IG51bGw7XG4gICAgICB9XG4gICAgICBwb2ludGVySWRSZWYuY3VycmVudCA9IG51bGw7XG4gICAgICBzZXRJc0RyYWdnaW5nKGZhbHNlKTtcbiAgICB9O1xuXG4gICAgZG9jdW1lbnQuYWRkRXZlbnRMaXN0ZW5lcigncG9pbnRlcm1vdmUnLCBvblBvaW50ZXJNb3ZlKTtcbiAgICBkb2N1bWVudC5hZGRFdmVudExpc3RlbmVyKCdwb2ludGVydXAnLCBvblBvaW50ZXJVcCk7XG4gICAgZG9jdW1lbnQuYWRkRXZlbnRMaXN0ZW5lcigncG9pbnRlcmNhbmNlbCcsIG9uUG9pbnRlclVwKTtcblxuICAgIHJldHVybiAoKSA9PiB7XG4gICAgICBkb2N1bWVudC5yZW1vdmVFdmVudExpc3RlbmVyKCdwb2ludGVybW92ZScsIG9uUG9pbnRlck1vdmUpO1xuICAgICAgZG9jdW1lbnQucmVtb3ZlRXZlbnRMaXN0ZW5lcigncG9pbnRlcnVwJywgb25Qb2ludGVyVXApO1xuICAgICAgZG9jdW1lbnQucmVtb3ZlRXZlbnRMaXN0ZW5lcigncG9pbnRlcmNhbmNlbCcsIG9uUG9pbnRlclVwKTtcbiAgICB9O1xuICB9LCBbaXNEcmFnZ2luZywgY2xhbXBQeF0pO1xuXG4gIGNvbnN0IGhhbmRsZVBvaW50ZXJEb3duID0gKGU6IFJlYWN0UG9pbnRlckV2ZW50PEhUTUxEaXZFbGVtZW50PikgPT4ge1xuICAgIGUuY3VycmVudFRhcmdldC5zZXRQb2ludGVyQ2FwdHVyZShlLnBvaW50ZXJJZCk7XG4gICAgcG9pbnRlcklkUmVmLmN1cnJlbnQgPSBlLnBvaW50ZXJJZDtcbiAgICBzZXRJc0RyYWdnaW5nKHRydWUpO1xuICB9O1xuXG4gIGNvbnN0IGhhbmRsZUxvc3RQb2ludGVyQ2FwdHVyZSA9ICgpID0+IHtcbiAgICBwb2ludGVySWRSZWYuY3VycmVudCA9IG51bGw7XG4gICAgc2V0SXNEcmFnZ2luZyhmYWxzZSk7XG4gICAgaWYgKHJhZlJlZi5jdXJyZW50KSB7XG4gICAgICBjYW5jZWxBbmltYXRpb25GcmFtZShyYWZSZWYuY3VycmVudCk7XG4gICAgICByYWZSZWYuY3VycmVudCA9IG51bGw7XG4gICAgfVxuICB9O1xuXG4gIGNvbnN0IGNvbFRlbXBsYXRlID0gYCR7c3RhcnRQeH1weCAke0dVVFRFUl9QWH1weCBtaW5tYXgoJHtNSU5fUFh9cHgsIDFmcilgO1xuICBjb25zdCBoYXNIZWFkZXJzID0gc3RhcnRIZWFkZXIgIT0gbnVsbCB8fCBlbmRIZWFkZXIgIT0gbnVsbDtcblxuICBjb25zdCBndXR0ZXIgPSAoXG4gICAgPGRpdlxuICAgICAgcmVmPXtndXR0ZXJSZWZ9XG4gICAgICBjbGFzc05hbWU9XCJyZWxhdGl2ZSB6LTIwIGlzb2xhdGUgZmxleCBzaHJpbmstMCBjdXJzb3ItY29sLXJlc2l6ZSBqdXN0aWZ5LWNlbnRlclwiXG4gICAgICBvblBvaW50ZXJEb3duPXtoYW5kbGVQb2ludGVyRG93bn1cbiAgICAgIG9uTG9zdFBvaW50ZXJDYXB0dXJlPXtoYW5kbGVMb3N0UG9pbnRlckNhcHR1cmV9XG4gICAgPlxuICAgICAgPHNwYW5cbiAgICAgICAgY2xhc3NOYW1lPVwicG9pbnRlci1ldmVudHMtbm9uZSByZWxhdGl2ZSB6LTEwIGgtZnVsbCB3LXB4IHNocmluay0wIGJnLWdyYXktYWxwaGEtNDAwXCJcbiAgICAgICAgYXJpYS1oaWRkZW5cbiAgICAgIC8+XG4gICAgPC9kaXY+XG4gICk7XG5cbiAgaWYgKGhhc0hlYWRlcnMpIHtcbiAgICByZXR1cm4gKFxuICAgICAgPGRpdiBjbGFzc05hbWU9e2NuKCdmbGV4IGZsZXgtY29sIGgtZnVsbCBtaW4taC0wJywgY2xhc3NOYW1lKX0+XG4gICAgICAgIDxkaXZcbiAgICAgICAgICBjbGFzc05hbWU9XCJzaHJpbmstMCBncmlkXCJcbiAgICAgICAgICBzdHlsZT17eyBncmlkVGVtcGxhdGVDb2x1bW5zOiBjb2xUZW1wbGF0ZSB9fVxuICAgICAgICA+XG4gICAgICAgICAgPGRpdj57c3RhcnRIZWFkZXJ9PC9kaXY+XG4gICAgICAgICAgPGRpdiBjbGFzc05hbWU9XCJmbGV4IGp1c3RpZnktY2VudGVyXCI+XG4gICAgICAgICAgICA8c3BhbiBjbGFzc05hbWU9XCJoLWZ1bGwgdy1weCBiZy1ncmF5LWFscGhhLTQwMFwiIGFyaWEtaGlkZGVuIC8+XG4gICAgICAgICAgPC9kaXY+XG4gICAgICAgICAgPGRpdj57ZW5kSGVhZGVyfTwvZGl2PlxuICAgICAgICA8L2Rpdj5cbiAgICAgICAgPGRpdlxuICAgICAgICAgIHJlZj17c2V0Q29udGFpbmVyUmVmfVxuICAgICAgICAgIGNsYXNzTmFtZT17Y24oXG4gICAgICAgICAgICAnZ3JpZCBmbGV4LTEgbWluLWgtMCBvdmVyZmxvdy14LWhpZGRlbiBvdmVyZmxvdy15LWF1dG8nLFxuICAgICAgICAgICAgaXNEcmFnZ2luZyAmJiAnc2VsZWN0LW5vbmUnXG4gICAgICAgICAgKX1cbiAgICAgICAgICBzdHlsZT17eyBncmlkVGVtcGxhdGVDb2x1bW5zOiBjb2xUZW1wbGF0ZSB9fVxuICAgICAgICA+XG4gICAgICAgICAge3N0YXJ0fVxuICAgICAgICAgIHtndXR0ZXJ9XG4gICAgICAgICAge2VuZH1cbiAgICAgICAgPC9kaXY+XG4gICAgICA8L2Rpdj5cbiAgICApO1xuICB9XG5cbiAgcmV0dXJuIChcbiAgICA8ZGl2XG4gICAgICByZWY9e3NldENvbnRhaW5lclJlZn1cbiAgICAgIGNsYXNzTmFtZT17Y24oXG4gICAgICAgICdncmlkIGgtZnVsbCBtaW4taC0wIGNvbnRlbnQtc3RhcnQgb3ZlcmZsb3cteC1oaWRkZW4gb3ZlcmZsb3cteS1hdXRvJyxcbiAgICAgICAgaXNEcmFnZ2luZyAmJiAnc2VsZWN0LW5vbmUnLFxuICAgICAgICBjbGFzc05hbWVcbiAgICAgICl9XG4gICAgICBzdHlsZT17eyBncmlkVGVtcGxhdGVDb2x1bW5zOiBjb2xUZW1wbGF0ZSwgaGVpZ2h0OiAnMTAwJScgfX1cbiAgICA+XG4gICAgICB7c3RhcnR9XG4gICAgICB7Z3V0dGVyfVxuICAgICAge2VuZH1cbiAgICA8L2Rpdj5cbiAgKTtcbn1cbiJdfQ==

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

@@ -0,0 +1,36 @@
+import type { ReactNode } from 'react';
+import { type SpanSearchResult } from '../search';
+import type { Span } from '../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;
+    isDimmed?: boolean;
+    onSelect: (spanId: string) => void;
+    onRevealTime?: (timeMs: number) => 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, searchResult, onSelect, onRevealTime, hoverFraction, altHeld, }: {
+    spans: Span[];
+    viewStart: number;
+    viewEnd: number;
+    markers: TimeMarker[];
+    selectedId: string | null;
+    searchResult: SpanSearchResult;
+    onSelect: (spanId: string) => void;
+    onRevealTime?: (timeMs: number) => 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,EAAiB,SAAS,EAAE,MAAM,OAAO,CAAC;AAgBtD,OAAO,EAAwB,KAAK,gBAAgB,EAAE,MAAM,WAAW,CAAC;AACxE,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,UAAU,CAAC;AACrC,OAAO,KAAK,EAIV,UAAU,EACX,MAAM,UAAU,CAAC;AAwBlB,eAAO,MAAM,mBAAmB,KAAK,CAAC;AAoUtC,QAAA,MAAM,WAAW;UAUT,IAAI;eACC,MAAM;kBACH,MAAM;oBACJ,MAAM;gBACV,OAAO;eACR,OAAO;cACR,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI;mBACnB,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI;EAsJvC,CAAC;AAEH,OAAO,EAAE,WAAW,EAAE,CAAC;AAiDvB,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;AAMD,wBAAgB,QAAQ,CAAC,EACvB,KAAK,EACL,SAAS,EACT,OAAO,EACP,OAAO,EACP,UAAU,EACV,YAAY,EACZ,QAAQ,EACR,YAAY,EACZ,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,YAAY,EAAE,gBAAgB,CAAC;IAC/B,QAAQ,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,aAAa,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC9B,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB,GAAG,SAAS,CA6FZ"}