@workflow/web-shared 5.0.0-beta.3 → 5.0.0-beta.30

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

@@ -1,14 +1,10 @@
-import { type ReactNode } from 'react';
-export declare function Divider(): import("react/jsx-runtime").JSX.Element;
+import { type ReactNode, type RefObject } from 'react';
 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, }: SplitPaneProps): import("react/jsx-runtime").JSX.Element;
+export declare function SplitPane({ children, className, 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

@@ -1 +1 @@
-{"version":3,"file":"split-pane.d.ts","sourceRoot":"","sources":["../../../../src/components/new-trace-viewer/components/split-pane.tsx"],"names":[],"mappings":"AAEA,OAAO,EAEL,KAAK,SAAS,EAMf,MAAM,OAAO,CAAC;AAQf,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"}
+{"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,EACd,KAAK,SAAS,EAIf,MAAM,OAAO,CAAC;AAaf,MAAM,WAAW,cAAc;IAC7B,QAAQ,EAAE,SAAS,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,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,WAAW,EACX,SAAS,EACT,kBAAkB,GACnB,EAAE,cAAc,2CA8FhB"}

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

@@ -1,33 +1,27 @@
 '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';
-/** Wide enough for comfortable dragging; visual line stays 1px centered. */
-const GUTTER_PX = 9;
-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, }) {
+import { Children, useCallback, useRef, useState, } from 'react';
+import { cn } from '../../../lib/cn';
+import { DraggableBorder } from './draggable-border';
+import { DEFAULT_START_PX, GUTTER_PX, MIN_PX, paneColTemplate, } from './pane-constants';
+import { useElementWidth } from './use-element-width';
+const SPLIT_PANE_START_ID = 'trace-split-start';
+export function SplitPane({ children, className, 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 [startPx, setStartPx] = useState(DEFAULT_START_PX);
     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 startRef = useRef(null);
+    const containerWidth = useElementWidth(containerRef);
+    const setContainerRef = useCallback((node) => {
+        containerRef.current = node;
+        if (scrollContainerRef) {
+            scrollContainerRef.current = node;
+        }
+    }, [scrollContainerRef]);
     const clampPx = useCallback((px) => {
         const el = containerRef.current;
         if (!el)
@@ -35,66 +29,13 @@ export function SplitPane({ children, className, defaultStartWidth = DEFAULT_STA
         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 content-start 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] }));
+    const handleWidthChange = useCallback((next) => setStartPx(clampPx(next)), [clampPx]);
+    const handleReset = useCallback(() => setStartPx(clampPx(DEFAULT_START_PX)), [clampPx]);
+    const effectiveStartPx = containerWidth > 0
+        ? Math.max(MIN_PX, Math.min(containerWidth - MIN_PX - GUTTER_PX, startPx))
+        : startPx;
+    const colTemplate = paneColTemplate(effectiveStartPx);
+    const maxStartPx = Math.max(MIN_PX, containerWidth > 0 ? containerWidth - MIN_PX - GUTTER_PX : startPx);
+    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: "grid flex-1 min-h-0 overflow-x-hidden overflow-y-auto", style: { gridTemplateColumns: colTemplate }, children: [_jsx("div", { ref: startRef, id: SPLIT_PANE_START_ID, className: "min-w-0", children: start }), _jsxs("div", { className: "relative z-20 isolate flex shrink-0 justify-center", children: [_jsx("span", { className: "pointer-events-none relative z-10 h-full w-px shrink-0 bg-gray-alpha-400", "aria-hidden": true }), _jsx(DraggableBorder, { element: startRef, position: "right", onWidthChange: handleWidthChange, onReset: handleReset, "aria-label": "Resize event list", "aria-controls": SPLIT_PANE_START_ID, "aria-valuemin": MIN_PX, "aria-valuemax": maxStartPx, "aria-valuenow": Math.min(Math.max(Math.round(effectiveStartPx), MIN_PX), maxStartPx) })] }), end] })] }));
 }
-//# sourceMappingURL=split-pane.js.map
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic3BsaXQtcGFuZS5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3NyYy9jb21wb25lbnRzL25ldy10cmFjZS12aWV3ZXIvY29tcG9uZW50cy9zcGxpdC1wYW5lLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxZQUFZLENBQUM7O0FBRWIsT0FBTyxFQUNMLFFBQVEsRUFHUixXQUFXLEVBQ1gsTUFBTSxFQUNOLFFBQVEsR0FDVCxNQUFNLE9BQU8sQ0FBQztBQUNmLE9BQU8sRUFBRSxFQUFFLEVBQUUsTUFBTSxpQkFBaUIsQ0FBQztBQUNyQyxPQUFPLEVBQUUsZUFBZSxFQUFFLE1BQU0sb0JBQW9CLENBQUM7QUFDckQsT0FBTyxFQUNMLGdCQUFnQixFQUNoQixTQUFTLEVBQ1QsTUFBTSxFQUNOLGVBQWUsR0FDaEIsTUFBTSxrQkFBa0IsQ0FBQztBQUMxQixPQUFPLEVBQUUsZUFBZSxFQUFFLE1BQU0scUJBQXFCLENBQUM7QUFFdEQsTUFBTSxtQkFBbUIsR0FBRyxtQkFBbUIsQ0FBQztBQVVoRCxNQUFNLFVBQVUsU0FBUyxDQUFDLEVBQ3hCLFFBQVEsRUFDUixTQUFTLEVBQ1QsV0FBVyxFQUNYLFNBQVMsRUFDVCxrQkFBa0IsR0FDSDtJQUNmLE1BQU0sS0FBSyxHQUFHLFFBQVEsQ0FBQyxPQUFPLENBQUMsUUFBUSxDQUFDLENBQUM7SUFDekMsSUFBSSxLQUFLLENBQUMsTUFBTSxLQUFLLENBQUMsRUFBRSxDQUFDO1FBQ3ZCLE1BQU0sSUFBSSxLQUFLLENBQUMsd0NBQXdDLENBQUMsQ0FBQztJQUM1RCxDQUFDO0lBQ0QsTUFBTSxDQUFDLEtBQUssRUFBRSxHQUFHLENBQUMsR0FBRyxLQUFLLENBQUM7SUFFM0IsTUFBTSxDQUFDLE9BQU8sRUFBRSxVQUFVLENBQUMsR0FBRyxRQUFRLENBQUMsZ0JBQWdCLENBQUMsQ0FBQztJQUN6RCxNQUFNLFlBQVksR0FBRyxNQUFNLENBQWlCLElBQUksQ0FBQyxDQUFDO0lBQ2xELE1BQU0s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LFdBQVcsZ0JBQ1QsbUJBQW1CLG1CQUNmLG1CQUFtQixtQkFDbkIsTUFBTSxtQkFDTixVQUFVLG1CQUNWLElBQUksQ0FBQyxHQUFHLENBQ3JCLElBQUksQ0FBQyxHQUFHLENBQUMsSUFBSSxDQUFDLEtBQUssQ0FBQyxnQkFBZ0IsQ0FBQyxFQUFFLE1BQU0sQ0FBQyxFQUM5QyxVQUFVLENBQ1gsR0FDRCxJQUNFLEVBQ0wsR0FBRyxJQUNBLElBQ0YsQ0FDUCxDQUFDO0FBQ0osQ0FBQyIsInNvdXJjZXNDb250ZW50IjpbIid1c2UgY2xpZW50JztcblxuaW1wb3J0IHtcbiAgQ2hpbGRyZW4sXG4gIHR5cGUgUmVhY3ROb2RlLFxuICB0eXBlIFJlZk9iamVjdCxcbiAgdXNlQ2FsbGJhY2ssXG4gIHVzZVJlZixcbiAgdXNlU3RhdGUsXG59IGZyb20gJ3JlYWN0JztcbmltcG9ydCB7IGNuIH0gZnJvbSAnLi4vLi4vLi4vbGliL2NuJztcbmltcG9ydCB7IERyYWdnYWJsZUJvcmRlciB9IGZyb20gJy4vZHJhZ2dhYmxlLWJvcmRlcic7XG5pbXBvcnQge1xuICBERUZBVUxUX1NUQVJUX1BYLFxuICBHVVRURVJfUFgsXG4gIE1JTl9QWCxcbiAgcGFuZUNvbFRlbXBsYXRlLFxufSBmcm9tICcuL3BhbmUtY29uc3RhbnRzJztcbmltcG9ydCB7IHVzZUVsZW1lbnRXaWR0aCB9IGZyb20gJy4vdXNlLWVsZW1lbnQtd2lkdGgnO1xuXG5jb25zdCBTUExJVF9QQU5FX1NUQVJUX0lEID0gJ3RyYWNlLXNwbGl0LXN0YXJ0JztcblxuZXhwb3J0IGludGVyZmFjZSBTcGxpdFBhbmVQcm9wcyB7XG4gIGNoaWxkcmVuOiBSZWFjdE5vZGU7XG4gIGNsYXNzTmFtZT86IHN0cmluZztcbiAgc3RhcnRIZWFkZXI/OiBSZWFjdE5vZGU7XG4gIGVuZEhlYWRlcj86IFJlYWN0Tm9kZTtcbiAgc2Nyb2xsQ29udGFpbmVyUmVmPzogUmVmT2JqZWN0PEhUTUxEaXZFbGVtZW50IHwgbnVsbD47XG59XG5cbmV4cG9ydCBmdW5jdGlvbiBTcGxpdFBhbmUoe1xuICBjaGlsZHJlbixcbiAgY2xhc3NOYW1lLFxuICBzdGFydEhlYWRlcixcbiAgZW5kSGVhZGVyLFxuICBzY3JvbGxDb250YWluZXJSZWYsXG59OiBTcGxpdFBhbmVQcm9wcykge1xuICBjb25zdCBwYXJ0cyA9IENoaWxkcmVuLnRvQXJyYXkoY2hpbGRyZW4pO1xuICBpZiAocGFydHMubGVuZ3RoICE9PSAyKSB7XG4gICAgdGhyb3cgbmV3IEVycm9yKCdTcGxpdFBhbmUgZXhwZWN0cyBleGFjdGx5IHR3byBjaGlsZHJlbicpO1xuICB9XG4gIGNvbnN0IFtzdGFydCwgZW5kXSA9IHBhcnRzO1xuXG4gIGNvbnN0IFtzdGFydFB4LCBzZXRTdGFydFB4XSA9IHVzZVN0YXRlKERFRkFVTFRfU1RBUlRfUFgpO1xuICBjb25zdCBjb250YWluZXJSZWYgPSB1c2VSZWY8SFRNTERpdkVsZW1lbnQ+KG51bGwpO1xuICBjb25zdCBzdGFydFJlZiA9IHVzZVJlZjxIVE1MRGl2RWxlbWVudD4obnVsbCk7XG4gIGNvbnN0IGNvbnRhaW5lcldpZHRoID0gdXNlRWxlbWVudFdpZHRoKGNvbnRhaW5lclJlZik7XG5cbiAgY29uc3Qgc2V0Q29udGFpbmVyUmVmID0gdXNlQ2FsbGJhY2soXG4gICAgKG5vZGU6IEhUTUxEaXZFbGVtZW50IHwgbnVsbCkgPT4ge1xuICAgICAgY29udGFpbmVyUmVmLmN1cnJlbnQgPSBub2RlO1xuICAgICAgaWYgKHNjcm9sbENvbnRhaW5lclJlZikge1xuICAgICAgICBzY3JvbGxDb250YWluZXJSZWYuY3VycmVudCA9IG5vZGU7XG4gICAgICB9XG4gICAgfSxcbiAgICBbc2Nyb2xsQ29udGFpbmVyUmVmXVxuICApO1xuXG4gIGNvbnN0IGNsYW1wUHggPSB1c2VDYWxsYmFjaygocHg6IG51bWJlcikgPT4ge1xuICAgIGNvbnN0IGVsID0gY29udGFpbmVyUmVmLmN1cnJlbnQ7XG4gICAgaWYgKCFlbCkgcmV0dXJuIHB4O1xuICAgIGNvbnN0IG1heFB4ID0gZWwuZ2V0Qm91bmRpbmdDbGllbnRSZWN0KCkud2lkdGggLSBNSU5fUFggLSBHVVRURVJfUFg7XG4gICAgcmV0dXJuIE1hdGgubWluKG1heFB4LCBNYXRoLm1heChNSU5fUFgsIHB4KSk7XG4gIH0sIFtdKTtcblxuICBjb25zdCBoYW5kbGVXaWR0aENoYW5nZSA9IHVzZUNhbGxiYWNrKFxuICAgIChuZXh0OiBudW1iZXIpID0+IHNldFN0YXJ0UHgoY2xhbXBQeChuZXh0KSksXG4gICAgW2NsYW1wUHhdXG4gICk7XG4gIGNvbnN0IGhhbmRsZVJlc2V0ID0gdXNlQ2FsbGJhY2soXG4gICAgKCkgPT4gc2V0U3RhcnRQeChjbGFtcFB4KERFRkFVTFRfU1RBUlRfUFgpKSxcbiAgICBbY2xhbXBQeF1cbiAgKTtcblxuICBjb25zdCBlZmZlY3RpdmVTdGFydFB4ID1cbiAgICBjb250YWluZXJXaWR0aCA+IDBcbiAgICAgID8gTWF0aC5tYXgoTUlOX1BYLCBNYXRoLm1pbihjb250YWluZXJXaWR0aCAtIE1JTl9QWCAtIEdVVFRFUl9QWCwgc3RhcnRQeCkpXG4gICAgICA6IHN0YXJ0UHg7XG5cbiAgY29uc3QgY29sVGVtcGxhdGUgPSBwYW5lQ29sVGVtcGxhdGUoZWZmZWN0aXZlU3RhcnRQeCk7XG5cbiAgY29uc3QgbWF4U3RhcnRQeCA9IE1hdGgubWF4KFxuICAgIE1JTl9QWCxcbiAgICBjb250YWluZXJXaWR0aCA+IDAgPyBjb250YWluZXJXaWR0aCAtIE1JTl9QWCAtIEdVVFRFUl9QWCA6IHN0YXJ0UHhcbiAgKTtcblxuICByZXR1cm4gKFxuICAgIDxkaXYgY2xhc3NOYW1lPXtjbignZmxleCBmbGV4LWNvbCBoLWZ1bGwgbWluLWgtMCcsIGNsYXNzTmFtZSl9PlxuICAgICAgPGRpdlxuICAgICAgICBjbGFzc05hbWU9XCJzaHJpbmstMCBncmlkXCJcbiAgICAgICAgc3R5bGU9e3sgZ3JpZFRlbXBsYXRlQ29sdW1uczogY29sVGVtcGxhdGUgfX1cbiAgICAgID5cbiAgICAgICAgPGRpdj57c3RhcnRIZWFkZXJ9PC9kaXY+XG4gICAgICAgIDxkaXYgY2xhc3NOYW1lPVwiZmxleCBqdXN0aWZ5LWNlbnRlclwiPlxuICAgICAgICAgIDxzcGFuIGNsYXNzTmFtZT1cImgtZnVsbCB3LXB4IGJnLWdyYXktYWxwaGEtNDAwXCIgYXJpYS1oaWRkZW4gLz5cbiAgICAgICAgPC9kaXY+XG4gICAgICAgIDxkaXY+e2VuZEhlYWRlcn08L2Rpdj5cbiAgICAgIDwvZGl2PlxuICAgICAgPGRpdlxuICAgICAgICByZWY9e3NldENvbnRhaW5lclJlZn1cbiAgICAgICAgY2xhc3NOYW1lPVwiZ3JpZCBmbGV4LTEgbWluLWgtMCBvdmVyZmxvdy14LWhpZGRlbiBvdmVyZmxvdy15LWF1dG9cIlxuICAgICAgICBzdHlsZT17eyBncmlkVGVtcGxhdGVDb2x1bW5zOiBjb2xUZW1wbGF0ZSB9fVxuICAgICAgPlxuICAgICAgICA8ZGl2IHJlZj17c3RhcnRSZWZ9IGlkPXtTUExJVF9QQU5FX1NUQVJUX0lEfSBjbGFzc05hbWU9XCJtaW4tdy0wXCI+XG4gICAgICAgICAge3N0YXJ0fVxuICAgICAgICA8L2Rpdj5cbiAgICAgICAgPGRpdiBjbGFzc05hbWU9XCJyZWxhdGl2ZSB6LTIwIGlzb2xhdGUgZmxleCBzaHJpbmstMCBqdXN0aWZ5LWNlbnRlclwiPlxuICAgICAgICAgIDxzcGFuXG4gICAgICAgICAgICBjbGFzc05hbWU9XCJwb2ludGVyLWV2ZW50cy1ub25lIHJlbGF0aXZlIHotMTAgaC1mdWxsIHctcHggc2hyaW5rLTAgYmctZ3JheS1hbHBoYS00MDBcIlxuICAgICAgICAgICAgYXJpYS1oaWRkZW5cbiAgICAgICAgICAvPlxuICAgICAgICAgIDxEcmFnZ2FibGVCb3JkZXJcbiAgICAgICAgICAgIGVsZW1lbnQ9e3N0YXJ0UmVmfVxuICAgICAgICAgICAgcG9zaXRpb249XCJyaWdodFwiXG4gICAgICAgICAgICBvbldpZHRoQ2hhbmdlPXtoYW5kbGVXaWR0aENoYW5nZX1cbiAgICAgICAgICAgIG9uUmVzZXQ9e2hhbmRsZVJlc2V0fVxuICAgICAgICAgICAgYXJpYS1sYWJlbD1cIlJlc2l6ZSBldmVudCBsaXN0XCJcbiAgICAgICAgICAgIGFyaWEtY29udHJvbHM9e1NQTElUX1BBTkVfU1RBUlRfSUR9XG4gICAgICAgICAgICBhcmlhLXZhbHVlbWluPXtNSU5fUFh9XG4gICAgICAgICAgICBhcmlhLXZhbHVlbWF4PXttYXhTdGFydFB4fVxuICAgICAgICAgICAgYXJpYS12YWx1ZW5vdz17TWF0aC5taW4oXG4gICAgICAgICAgICAgIE1hdGgubWF4KE1hdGgucm91bmQoZWZmZWN0aXZlU3RhcnRQeCksIE1JTl9QWCksXG4gICAgICAgICAgICAgIG1heFN0YXJ0UHhcbiAgICAgICAgICAgICl9XG4gICAgICAgICAgLz5cbiAgICAgICAgPC9kaXY+XG4gICAgICAgIHtlbmR9XG4gICAgICA8L2Rpdj5cbiAgICA8L2Rpdj5cbiAgKTtcbn1cbiJdfQ==

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

@@ -1,31 +1,35 @@
 import type { ReactNode } from 'react';
-import type { Span } from '../../trace-viewer/types';
-import type { TimeCompression } from '../utils';
-declare const TimelineBar: import("react").NamedExoticComponent<{
+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").MemoExoticComponent<({ span, viewStart, viewDuration, containerWidth, isSelected, isDimmed, onSelect, onRevealTime, }: {
     span: Span;
-    compression: TimeCompression;
+    viewStart: number;
+    viewDuration: number;
     containerWidth: number;
     isSelected: boolean;
-    onClick: () => void;
-}>;
+    isDimmed?: boolean;
+    onSelect: (spanId: string) => void;
+    onRevealTime?: (timeMs: number) => void;
+}) => ReactNode>;
 export { TimelineBar };
-export declare function TimelineHeader({ viewStart, viewDuration, rootStart, compression, isZoomed, onResetZoom, hoverInfo, }: {
-    viewStart: number;
-    viewDuration: number;
-    rootStart: number;
-    compression: TimeCompression;
-    isZoomed: boolean;
-    onResetZoom: () => void;
+export declare function TimelineHeader({ markers, hoverInfo, }: {
+    markers: TimeMarker[];
     hoverInfo?: {
         fraction: number;
         label: string;
     } | null;
 }): ReactNode;
-export declare function Timeline({ spans, compression, selectedId, onSelect, hoverFraction, altHeld, }: {
+export declare function Timeline({ spans, viewStart, viewEnd, markers, selectedId, searchResult, onSelect, onRevealTime, hoverFraction, altHeld, }: {
     spans: Span[];
-    compression: TimeCompression;
+    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;

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

@@ -1 +1 @@
-{"version":3,"file":"timeline.d.ts","sourceRoot":"","sources":["../../../../src/components/new-trace-viewer/components/timeline.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGvC,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,0BAA0B,CAAC;AAErD,OAAO,KAAK,EAAiB,eAAe,EAAE,MAAM,UAAU,CAAC;AAuE/D,QAAA,MAAM,WAAW;UAOT,IAAI;iBACG,eAAe;oBACZ,MAAM;gBACV,OAAO;aACV,MAAM,IAAI;EAwJnB,CAAC;AAEH,OAAO,EAAE,WAAW,EAAE,CAAC;AAEvB,wBAAgB,cAAc,CAAC,EAC7B,SAAS,EACT,YAAY,EACZ,SAAS,EACT,WAAW,EACX,QAAQ,EACR,WAAW,EACX,SAAS,GACV,EAAE;IACD,SAAS,EAAE,MAAM,CAAC;IAClB,YAAY,EAAE,MAAM,CAAC;IACrB,SAAS,EAAE,MAAM,CAAC;IAClB,WAAW,EAAE,eAAe,CAAC;IAC7B,QAAQ,EAAE,OAAO,CAAC;IAClB,WAAW,EAAE,MAAM,IAAI,CAAC;IACxB,SAAS,CAAC,EAAE;QAAE,QAAQ,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,GAAG,IAAI,CAAC;CACxD,GAAG,SAAS,CAgDZ;AAED,wBAAgB,QAAQ,CAAC,EACvB,KAAK,EACL,WAAW,EACX,UAAU,EACV,QAAQ,EACR,aAAa,EACb,OAAe,GAChB,EAAE;IACD,KAAK,EAAE,IAAI,EAAE,CAAC;IACd,WAAW,EAAE,eAAe,CAAC;IAC7B,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,CAoDZ"}
+{"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;AAetD,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;AAyBlB,eAAO,MAAM,mBAAmB,KAAK,CAAC;AAoUtC,QAAA,MAAM,WAAW,yIASd;IACD,IAAI,EAAE,IAAI,CAAC;IACX,SAAS,EAAE,MAAM,CAAC;IAClB,YAAY,EAAE,MAAM,CAAC;IACrB,cAAc,EAAE,MAAM,CAAC;IACvB,UAAU,EAAE,OAAO,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;CACzC,KAAG,SAAS,CAmJX,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"}