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

package/dist/components/trace-viewer/util/use-streaming-spans.js

@@ -1,345 +0,0 @@
-'use client';
-import { useEffect, useRef, useState } from 'react';
-import { useTraceViewer } from '../context';
-import { MARKER_HEIGHT, ROW_HEIGHT, ROW_PADDING, TIMELINE_PADDING, } from './constants';
-import { adjustSpanVisibility } from './tree';
-function emptyArrayInit() {
-    return [];
-}
-export const useStreamingSpans = (highlightedSpans, eagerRender = false) => {
-    const { state, dispatch } = useTraceViewer();
-    const { root, filter: ctxFilter, scale, timelineRef, timelineWidth, spanMap, scrollSnapshotRef, selected, memoCacheRef, } = state;
-    const timelineHeight = useStableValue(state.timelineHeight);
-    const counterRef = useRef(0);
-    const [rows, setRows] = useState(emptyArrayInit);
-    const [visibleSpans, setVisibleSpans] = useState(emptyArrayInit);
-    const [visibleEvents, setVisibleEvents] = useState(emptyArrayInit);
-    const [resultScale, setResultScale] = useState(-1);
-    const updateFilterRef = useRef(undefined);
-    useEffect(() => updateFilterRef.current?.(ctxFilter), [ctxFilter]);
-    useEffect(() => {
-        if (!highlightedSpans?.length)
-            return;
-        for (const row of rows) {
-            for (const node of row) {
-                const isHighlighted = highlightedSpans.includes(node.span.spanId);
-                if (node.isHighlighted === isHighlighted)
-                    continue;
-                node.isHighlighted = isHighlighted;
-                memoCacheRef.current.set(node.span.spanId, {});
-            }
-        }
-        dispatch({
-            type: 'forceRender',
-        });
-    }, [rows, highlightedSpans, dispatch, memoCacheRef]);
-    useEffect(() => {
-        if (!root.startTime)
-            return;
-        const worker = new Worker(new URL('../worker', import.meta.url), {
-            type: 'module',
-        });
-        let requestId = ++counterRef.current;
-        const onMessage = (event) => {
-            const data = event.data;
-            switch (data.type) {
-                case 'setRowsResult': {
-                    if (data?.requestId !== requestId)
-                        return;
-                    if (data.isEnd) {
-                        for (const row of data.rows) {
-                            for (const node of row) {
-                                // Ensure that we remap to the original span to reduce memory overhead
-                                // and confusion down the line
-                                node.span = spanMap[node.span.spanId]?.span ?? node.span;
-                            }
-                        }
-                    }
-                    setRows(data.rows);
-                    break;
-                }
-                case 'updateHighlight': {
-                    if (data?.requestId !== requestId)
-                        return;
-                    const { matches } = data;
-                    setRows((previous) => {
-                        for (const row of previous) {
-                            for (const node of row) {
-                                const isHighlighted = matches.has(node.span.spanId);
-                                if (node.isHighlighted === isHighlighted)
-                                    continue;
-                                node.isHighlighted = isHighlighted;
-                                memoCacheRef.current.set(node.span.spanId, {});
-                            }
-                        }
-                        return previous;
-                    });
-                    dispatch({
-                        type: 'forceRender',
-                    });
-                    break;
-                }
-                default:
-                    break;
-            }
-        };
-        worker.addEventListener('message', onMessage);
-        const message = {
-            requestId,
-            type: 'calculateSpanPositions',
-            root,
-        };
-        worker.postMessage(message);
-        updateFilterRef.current = (_filter) => {
-            const filter = _filter.trim().toLocaleLowerCase();
-            if (!filter) {
-                setRows((previous) => previous.map((row) => row.map((node) => {
-                    node.isHighlighted = undefined;
-                    return {
-                        ...node,
-                    };
-                })));
-                return;
-            }
-            requestId = ++counterRef.current;
-            const filterMessage = {
-                type: 'filterSpans',
-                requestId,
-                root,
-                filter,
-            };
-            worker.postMessage(filterMessage);
-        };
-        return () => {
-            worker.terminate();
-        };
-    }, [root, spanMap, dispatch, memoCacheRef]);
-    useEffect(() => {
-        if (!rows.length)
-            return;
-        if (eagerRender) {
-            const visible = [];
-            const events = [];
-            for (const row of rows) {
-                for (const span of row) {
-                    if (!adjustSpanVisibility(span, scale))
-                        continue;
-                    visible.push(span);
-                    if (span.events) {
-                        events.push(...span.events);
-                    }
-                }
-            }
-            setVisibleSpans(visible);
-            setVisibleEvents(events);
-            setResultScale(scale);
-            return;
-        }
-        const $timeline = timelineRef.current;
-        let snapshot = scrollSnapshotRef.current;
-        let hasScrolled = false;
-        let isDone = false;
-        let maxD = 0;
-        let currentD = 0;
-        const overscan = Math.max(500, timelineWidth * 0.5);
-        const queue = new Array(rows.length).fill(null);
-        const buildQueue = () => {
-            isDone = true;
-            const lastRow = Math.min(1 + currentD + Math.ceil(snapshot?.endRow ?? Number.POSITIVE_INFINITY), rows.length);
-            for (let i = lastRow; i--;) {
-                if (queue[i])
-                    continue;
-                const rowDelta = getRowDelta(i);
-                if (Math.abs(rowDelta) > currentD) {
-                    isDone = false;
-                    if (rowDelta > 0) {
-                        continue;
-                    }
-                    else {
-                        break;
-                    }
-                }
-                const queueRow = [];
-                const row = rows[i];
-                if (!row)
-                    continue;
-                for (const span of row) {
-                    if (!adjustSpanVisibility(span, scale))
-                        continue;
-                    const d = getDistance(span);
-                    maxD = Math.max(d, maxD);
-                    queueRow.push({
-                        d,
-                        span,
-                    });
-                }
-                queue[i] = queueRow;
-            }
-        };
-        /**
-         * This returns the signed distance between the row and the targeted rows
-         */
-        const getRowDelta = (row) => {
-            if (!snapshot)
-                return 0;
-            if (row < snapshot.startRow) {
-                return row - snapshot.startRow;
-            }
-            else if (row > snapshot.endRow) {
-                return row - snapshot.endRow;
-            }
-            return 0;
-        };
-        const getDistance = (span) => {
-            if (!snapshot)
-                return 0;
-            let xDistance = 0;
-            if (span.endTime < snapshot.startTime) {
-                xDistance = snapshot.startTime - span.endTime;
-            }
-            else if (span.startTime > snapshot.endTime) {
-                xDistance = span.startTime - snapshot.endTime;
-            }
-            const yDistance = Math.abs(getRowDelta(span.row));
-            if (!xDistance && !yDistance)
-                return 0;
-            return Math.sqrt((xDistance / scale) ** 2 + (yDistance * ROW_HEIGHT + ROW_PADDING) ** 2);
-        };
-        const updateSnapshot = () => {
-            if (!$timeline)
-                return;
-            const { scrollLeft, scrollTop } = $timeline;
-            const anchorX = 0;
-            const anchorT = scrollLeft / scale;
-            const startRow = (scrollTop - MARKER_HEIGHT - TIMELINE_PADDING) /
-                (ROW_HEIGHT + ROW_PADDING);
-            const endRow = startRow + Math.ceil(timelineHeight / (ROW_HEIGHT + ROW_PADDING));
-            snapshot = {
-                anchorT,
-                anchorX,
-                scrollLeft,
-                scrollTop,
-                startTime: root.startTime + scrollLeft / scale,
-                endTime: root.startTime + (scrollLeft + timelineWidth) / scale,
-                startRow,
-                endRow,
-                scale,
-            };
-            scrollSnapshotRef.current = snapshot;
-            for (let i = queue.length; i--;) {
-                queue[i] = null;
-            }
-        };
-        let nextFrame = 0;
-        const onFrame = () => {
-            if (hasScrolled || !snapshot) {
-                hasScrolled = false;
-                updateSnapshot();
-            }
-            buildQueue();
-            const visible = [];
-            const events = [];
-            for (const row of queue) {
-                if (!row)
-                    continue;
-                for (const { d, span } of row) {
-                    if (d > currentD)
-                        continue;
-                    visible.push(span);
-                    if (span.events) {
-                        events.push(...span.events);
-                    }
-                }
-            }
-            if (currentD < overscan && (!isDone || currentD < maxD)) {
-                currentD = Math.min(overscan, currentD + 100);
-                nextFrame = requestAnimationFrame(onFrame);
-            }
-            setVisibleSpans(visible);
-            setVisibleEvents(events);
-            setResultScale(scale);
-        };
-        onFrame();
-        let ignoreT = Date.now();
-        const onWheel = (event) => {
-            if (event.ctrlKey || event.metaKey) {
-                ignoreT = Date.now();
-            }
-        };
-        $timeline?.addEventListener('wheel', onWheel);
-        const onScroll = () => {
-            if (Date.now() - ignoreT <= 50)
-                return;
-            hasScrolled = true;
-            cancelAnimationFrame(nextFrame);
-            nextFrame = requestAnimationFrame(onFrame);
-        };
-        $timeline?.addEventListener('scroll', onScroll);
-        return () => {
-            cancelAnimationFrame(nextFrame);
-            $timeline?.removeEventListener('wheel', onWheel);
-            $timeline?.removeEventListener('scroll', onScroll);
-        };
-    }, [
-        rows,
-        root,
-        scale,
-        scrollSnapshotRef,
-        timelineRef,
-        timelineWidth,
-        timelineHeight,
-        eagerRender,
-    ]);
-    useEffect(() => {
-        if (!selected)
-            return;
-        let span;
-        for (const x of visibleSpans) {
-            if (x.span.spanId === selected.span.spanId) {
-                span = x;
-                break;
-            }
-        }
-        const $span = span?.ref?.current;
-        if (!span || !$span)
-            return;
-        span.isSelected = true;
-        $span.setAttribute('data-selected', '');
-        return () => {
-            span.isSelected = false;
-            $span.removeAttribute('data-selected');
-        };
-    }, [visibleSpans, selected]);
-    return {
-        rows,
-        spans: visibleSpans,
-        events: visibleEvents,
-        scale: resultScale,
-    };
-};
-/**
- * This hook keeps returning the same value until the current value
- * has been stable for a few frames in a row
- */
-function useStableValue(value) {
-    const [cached, setCached] = useState(value);
-    useEffect(() => {
-        if (cached === value)
-            return;
-        let frameCount = 0;
-        let nextFrame = 0;
-        const onFrame = () => {
-            if (++frameCount <= 3) {
-                nextFrame = requestAnimationFrame(onFrame);
-                return;
-            }
-            setCached(value);
-        };
-        onFrame();
-        return () => {
-            cancelAnimationFrame(nextFrame);
-        };
-    }, [cached, value]);
-    return cached;
-}
-//# sourceMappingURL=use-streaming-spans.js.map

package/dist/components/trace-viewer/util/use-streaming-spans.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"use-streaming-spans.js","sourceRoot":"","sources":["../../../../src/components/trace-viewer/util/use-streaming-spans.ts"],"names":[],"mappings":"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","sourcesContent":["'use client';\n\nimport { useEffect, useRef, useState } from 'react';\nimport { useTraceViewer } from '../context';\nimport type {\n  VisibleSpan,\n  VisibleSpanEvent,\n  WorkerRequest,\n  WorkerResponse,\n} from '../types';\nimport {\n  MARKER_HEIGHT,\n  ROW_HEIGHT,\n  ROW_PADDING,\n  TIMELINE_PADDING,\n} from './constants';\nimport { adjustSpanVisibility } from './tree';\n\ntype UpdateFilter = (filter: string) => void;\n\ninterface QueuedSpan {\n  /** The distance from this span to the viewport */\n  d: number;\n  /** The span that's waiting to be rendered */\n  span: VisibleSpan;\n}\n\nfunction emptyArrayInit<T>(): T[] {\n  return [];\n}\n\nexport const useStreamingSpans = (\n  highlightedSpans?: string[],\n  eagerRender = false\n): {\n  rows: VisibleSpan[][];\n  spans: VisibleSpan[];\n  events: VisibleSpanEvent[];\n  scale: number;\n} => {\n  const { state, dispatch } = useTraceViewer();\n  const {\n    root,\n    filter: ctxFilter,\n    scale,\n    timelineRef,\n    timelineWidth,\n    spanMap,\n    scrollSnapshotRef,\n    selected,\n    memoCacheRef,\n  } = state;\n  const timelineHeight = useStableValue(state.timelineHeight);\n  const counterRef = useRef(0);\n  const [rows, setRows] = useState<VisibleSpan[][]>(emptyArrayInit);\n  const [visibleSpans, setVisibleSpans] =\n    useState<VisibleSpan[]>(emptyArrayInit);\n  const [visibleEvents, setVisibleEvents] =\n    useState<VisibleSpanEvent[]>(emptyArrayInit);\n  const [resultScale, setResultScale] = useState(-1);\n\n  const updateFilterRef = useRef<UpdateFilter>(undefined);\n  useEffect(() => updateFilterRef.current?.(ctxFilter), [ctxFilter]);\n\n  useEffect(() => {\n    if (!highlightedSpans?.length) return;\n\n    for (const row of rows) {\n      for (const node of row) {\n        const isHighlighted = highlightedSpans.includes(node.span.spanId);\n        if (node.isHighlighted === isHighlighted) continue;\n        node.isHighlighted = isHighlighted;\n        memoCacheRef.current.set(node.span.spanId, {});\n      }\n    }\n    dispatch({\n      type: 'forceRender',\n    });\n  }, [rows, highlightedSpans, dispatch, memoCacheRef]);\n\n  useEffect(() => {\n    if (!root.startTime) return;\n\n    const worker = new Worker(new URL('../worker', import.meta.url), {\n      type: 'module',\n    });\n    let requestId = ++counterRef.current;\n    const onMessage = (event: MessageEvent): void => {\n      const data = event.data as WorkerResponse;\n\n      switch (data.type) {\n        case 'setRowsResult': {\n          if (data?.requestId !== requestId) return;\n          if (data.isEnd) {\n            for (const row of data.rows) {\n              for (const node of row) {\n                // Ensure that we remap to the original span to reduce memory overhead\n                // and confusion down the line\n                node.span = spanMap[node.span.spanId]?.span ?? node.span;\n              }\n            }\n          }\n          setRows(data.rows);\n          break;\n        }\n        case 'updateHighlight': {\n          if (data?.requestId !== requestId) return;\n          const { matches } = data;\n          setRows((previous) => {\n            for (const row of previous) {\n              for (const node of row) {\n                const isHighlighted = matches.has(node.span.spanId);\n                if (node.isHighlighted === isHighlighted) continue;\n                node.isHighlighted = isHighlighted;\n                memoCacheRef.current.set(node.span.spanId, {});\n              }\n            }\n            return previous;\n          });\n          dispatch({\n            type: 'forceRender',\n          });\n          break;\n        }\n        default:\n          break;\n      }\n    };\n    worker.addEventListener('message', onMessage);\n\n    const message: WorkerRequest = {\n      requestId,\n      type: 'calculateSpanPositions',\n      root,\n    };\n    worker.postMessage(message);\n\n    updateFilterRef.current = (_filter) => {\n      const filter = _filter.trim().toLocaleLowerCase();\n      if (!filter) {\n        setRows((previous) =>\n          previous.map((row) =>\n            row.map((node) => {\n              node.isHighlighted = undefined;\n              return {\n                ...node,\n              };\n            })\n          )\n        );\n        return;\n      }\n\n      requestId = ++counterRef.current;\n      const filterMessage: WorkerRequest = {\n        type: 'filterSpans',\n        requestId,\n        root,\n        filter,\n      };\n      worker.postMessage(filterMessage);\n    };\n\n    return () => {\n      worker.terminate();\n    };\n  }, [root, spanMap, dispatch, memoCacheRef]);\n\n  useEffect(() => {\n    if (!rows.length) return;\n\n    if (eagerRender) {\n      const visible: VisibleSpan[] = [];\n      const events: VisibleSpanEvent[] = [];\n      for (const row of rows) {\n        for (const span of row) {\n          if (!adjustSpanVisibility(span, scale)) continue;\n          visible.push(span);\n          if (span.events) {\n            events.push(...span.events);\n          }\n        }\n      }\n      setVisibleSpans(visible);\n      setVisibleEvents(events);\n      setResultScale(scale);\n      return;\n    }\n\n    const $timeline = timelineRef.current;\n    let snapshot = scrollSnapshotRef.current;\n    let hasScrolled = false;\n    let isDone = false;\n    let maxD = 0;\n    let currentD = 0;\n    const overscan = Math.max(500, timelineWidth * 0.5);\n    const queue = new Array<QueuedSpan[] | null>(rows.length).fill(null);\n\n    const buildQueue = (): void => {\n      isDone = true;\n\n      const lastRow = Math.min(\n        1 + currentD + Math.ceil(snapshot?.endRow ?? Number.POSITIVE_INFINITY),\n        rows.length\n      );\n      for (let i = lastRow; i--; ) {\n        if (queue[i]) continue;\n        const rowDelta = getRowDelta(i);\n        if (Math.abs(rowDelta) > currentD) {\n          isDone = false;\n          if (rowDelta > 0) {\n            continue;\n          } else {\n            break;\n          }\n        }\n\n        const queueRow: QueuedSpan[] = [];\n        const row = rows[i];\n        if (!row) continue;\n\n        for (const span of row) {\n          if (!adjustSpanVisibility(span, scale)) continue;\n\n          const d = getDistance(span);\n          maxD = Math.max(d, maxD);\n\n          queueRow.push({\n            d,\n            span,\n          });\n        }\n\n        queue[i] = queueRow;\n      }\n    };\n\n    /**\n     * This returns the signed distance between the row and the targeted rows\n     */\n    const getRowDelta = (row: number): number => {\n      if (!snapshot) return 0;\n\n      if (row < snapshot.startRow) {\n        return row - snapshot.startRow;\n      } else if (row > snapshot.endRow) {\n        return row - snapshot.endRow;\n      }\n\n      return 0;\n    };\n\n    const getDistance = (span: VisibleSpan): number => {\n      if (!snapshot) return 0;\n\n      let xDistance = 0;\n      if (span.endTime < snapshot.startTime) {\n        xDistance = snapshot.startTime - span.endTime;\n      } else if (span.startTime > snapshot.endTime) {\n        xDistance = span.startTime - snapshot.endTime;\n      }\n\n      const yDistance = Math.abs(getRowDelta(span.row));\n\n      if (!xDistance && !yDistance) return 0;\n\n      return Math.sqrt(\n        (xDistance / scale) ** 2 + (yDistance * ROW_HEIGHT + ROW_PADDING) ** 2\n      );\n    };\n\n    const updateSnapshot = (): void => {\n      if (!$timeline) return;\n\n      const { scrollLeft, scrollTop } = $timeline;\n      const anchorX = 0;\n      const anchorT = scrollLeft / scale;\n      const startRow =\n        (scrollTop - MARKER_HEIGHT - TIMELINE_PADDING) /\n        (ROW_HEIGHT + ROW_PADDING);\n      const endRow =\n        startRow + Math.ceil(timelineHeight / (ROW_HEIGHT + ROW_PADDING));\n\n      snapshot = {\n        anchorT,\n        anchorX,\n        scrollLeft,\n        scrollTop,\n        startTime: root.startTime + scrollLeft / scale,\n        endTime: root.startTime + (scrollLeft + timelineWidth) / scale,\n        startRow,\n        endRow,\n        scale,\n      };\n      scrollSnapshotRef.current = snapshot;\n\n      for (let i = queue.length; i--; ) {\n        queue[i] = null;\n      }\n    };\n\n    let nextFrame = 0;\n    const onFrame = (): void => {\n      if (hasScrolled || !snapshot) {\n        hasScrolled = false;\n        updateSnapshot();\n      }\n      buildQueue();\n      const visible: VisibleSpan[] = [];\n      const events: VisibleSpanEvent[] = [];\n      for (const row of queue) {\n        if (!row) continue;\n\n        for (const { d, span } of row) {\n          if (d > currentD) continue;\n          visible.push(span);\n          if (span.events) {\n            events.push(...span.events);\n          }\n        }\n      }\n\n      if (currentD < overscan && (!isDone || currentD < maxD)) {\n        currentD = Math.min(overscan, currentD + 100);\n        nextFrame = requestAnimationFrame(onFrame);\n      }\n\n      setVisibleSpans(visible);\n      setVisibleEvents(events);\n      setResultScale(scale);\n    };\n    onFrame();\n\n    let ignoreT = Date.now();\n    const onWheel = (event: WheelEvent): void => {\n      if (event.ctrlKey || event.metaKey) {\n        ignoreT = Date.now();\n      }\n    };\n    $timeline?.addEventListener('wheel', onWheel);\n\n    const onScroll = (): void => {\n      if (Date.now() - ignoreT <= 50) return;\n\n      hasScrolled = true;\n      cancelAnimationFrame(nextFrame);\n      nextFrame = requestAnimationFrame(onFrame);\n    };\n    $timeline?.addEventListener('scroll', onScroll);\n\n    return () => {\n      cancelAnimationFrame(nextFrame);\n      $timeline?.removeEventListener('wheel', onWheel);\n      $timeline?.removeEventListener('scroll', onScroll);\n    };\n  }, [\n    rows,\n    root,\n    scale,\n    scrollSnapshotRef,\n    timelineRef,\n    timelineWidth,\n    timelineHeight,\n    eagerRender,\n  ]);\n\n  useEffect(() => {\n    if (!selected) return;\n\n    let span: VisibleSpan | undefined;\n    for (const x of visibleSpans) {\n      if (x.span.spanId === selected.span.spanId) {\n        span = x;\n        break;\n      }\n    }\n\n    const $span = span?.ref?.current;\n    if (!span || !$span) return;\n\n    span.isSelected = true;\n    $span.setAttribute('data-selected', '');\n\n    return () => {\n      span.isSelected = false;\n      $span.removeAttribute('data-selected');\n    };\n  }, [visibleSpans, selected]);\n\n  return {\n    rows,\n    spans: visibleSpans,\n    events: visibleEvents,\n    scale: resultScale,\n  };\n};\n\n/**\n * This hook keeps returning the same value until the current value\n * has been stable for a few frames in a row\n */\nfunction useStableValue<T>(value: T): T {\n  const [cached, setCached] = useState(value);\n\n  useEffect(() => {\n    if (cached === value) return;\n\n    let frameCount = 0;\n    let nextFrame = 0;\n    const onFrame = (): void => {\n      if (++frameCount <= 3) {\n        nextFrame = requestAnimationFrame(onFrame);\n        return;\n      }\n\n      setCached(value);\n    };\n    onFrame();\n\n    return () => {\n      cancelAnimationFrame(nextFrame);\n    };\n  }, [cached, value]);\n\n  return cached;\n}\n"]}

package/dist/components/trace-viewer/util/use-trackpad-zoom.d.ts

@@ -1,6 +0,0 @@
-/**
- * The delta is positive while zooming in, negative while zooming out
- */
-export type TrackpadZoomHandler = (delta: number) => void;
-export declare function useTrackpadZoom(handler: TrackpadZoomHandler): void;
-//# sourceMappingURL=use-trackpad-zoom.d.ts.map

package/dist/components/trace-viewer/util/use-trackpad-zoom.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"use-trackpad-zoom.d.ts","sourceRoot":"","sources":["../../../../src/components/trace-viewer/util/use-trackpad-zoom.tsx"],"names":[],"mappings":"AAIA;;GAEG;AACH,MAAM,MAAM,mBAAmB,GAAG,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;AAE1D,wBAAgB,eAAe,CAAC,OAAO,EAAE,mBAAmB,GAAG,IAAI,CAyClE"}

package/dist/components/trace-viewer/util/use-trackpad-zoom.js

@@ -1,39 +0,0 @@
-'use client';
-import { useEffect, useRef } from 'react';
-export function useTrackpadZoom(handler) {
-    const handlerRef = useRef(handler);
-    handlerRef.current = handler;
-    useEffect(() => {
-        let pendingDelta = 0;
-        let nextFrame = 0;
-        const onFrame = () => {
-            handlerRef.current(pendingDelta);
-            pendingDelta = 0;
-        };
-        const onWheel = (event) => {
-            if (!event.ctrlKey && !event.metaKey)
-                return;
-            event.preventDefault();
-            let delta = -event.deltaY;
-            switch (event.deltaMode) {
-                case WheelEvent.DOM_DELTA_PAGE:
-                    delta *= window.innerHeight;
-                    break;
-                case WheelEvent.DOM_DELTA_LINE:
-                    delta *= 20;
-                    break;
-                default:
-                    break;
-            }
-            pendingDelta += delta;
-            cancelAnimationFrame(nextFrame);
-            nextFrame = requestAnimationFrame(onFrame);
-        };
-        window.addEventListener('wheel', onWheel, { passive: false });
-        return () => {
-            window.removeEventListener('wheel', onWheel);
-            cancelAnimationFrame(nextFrame);
-        };
-    }, []);
-}
-//# sourceMappingURL=use-trackpad-zoom.js.map

package/dist/components/trace-viewer/util/use-trackpad-zoom.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"use-trackpad-zoom.js","sourceRoot":"","sources":["../../../../src/components/trace-viewer/util/use-trackpad-zoom.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;AAEb,OAAO,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAO1C,MAAM,UAAU,eAAe,CAAC,OAA4B;IAC1D,MAAM,UAAU,GAAG,MAAM,CAAC,OAAO,CAAC,CAAC;IACnC,UAAU,CAAC,OAAO,GAAG,OAAO,CAAC;IAE7B,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,YAAY,GAAG,CAAC,CAAC;QACrB,IAAI,SAAS,GAAG,CAAC,CAAC;QAClB,MAAM,OAAO,GAAG,GAAS,EAAE;YACzB,UAAU,CAAC,OAAO,CAAC,YAAY,CAAC,CAAC;YACjC,YAAY,GAAG,CAAC,CAAC;QACnB,CAAC,CAAC;QAEF,MAAM,OAAO,GAAG,CAAC,KAAiB,EAAQ,EAAE;YAC1C,IAAI,CAAC,KAAK,CAAC,OAAO,IAAI,CAAC,KAAK,CAAC,OAAO;gBAAE,OAAO;YAE7C,KAAK,CAAC,cAAc,EAAE,CAAC;YACvB,IAAI,KAAK,GAAG,CAAC,KAAK,CAAC,MAAM,CAAC;YAE1B,QAAQ,KAAK,CAAC,SAAS,EAAE,CAAC;gBACxB,KAAK,UAAU,CAAC,cAAc;oBAC5B,KAAK,IAAI,MAAM,CAAC,WAAW,CAAC;oBAC5B,MAAM;gBACR,KAAK,UAAU,CAAC,cAAc;oBAC5B,KAAK,IAAI,EAAE,CAAC;oBACZ,MAAM;gBACR;oBACE,MAAM;YACV,CAAC;YAED,YAAY,IAAI,KAAK,CAAC;YACtB,oBAAoB,CAAC,SAAS,CAAC,CAAC;YAChC,SAAS,GAAG,qBAAqB,CAAC,OAAO,CAAC,CAAC;QAC7C,CAAC,CAAC;QAEF,MAAM,CAAC,gBAAgB,CAAC,OAAO,EAAE,OAAO,EAAE,EAAE,OAAO,EAAE,KAAK,EAAE,CAAC,CAAC;QAE9D,OAAO,GAAG,EAAE;YACV,MAAM,CAAC,mBAAmB,CAAC,OAAO,EAAE,OAAO,CAAC,CAAC;YAC7C,oBAAoB,CAAC,SAAS,CAAC,CAAC;QAClC,CAAC,CAAC;IACJ,CAAC,EAAE,EAAE,CAAC,CAAC;AACT,CAAC","sourcesContent":["'use client';\n\nimport { useEffect, useRef } from 'react';\n\n/**\n * The delta is positive while zooming in, negative while zooming out\n */\nexport type TrackpadZoomHandler = (delta: number) => void;\n\nexport function useTrackpadZoom(handler: TrackpadZoomHandler): void {\n  const handlerRef = useRef(handler);\n  handlerRef.current = handler;\n\n  useEffect(() => {\n    let pendingDelta = 0;\n    let nextFrame = 0;\n    const onFrame = (): void => {\n      handlerRef.current(pendingDelta);\n      pendingDelta = 0;\n    };\n\n    const onWheel = (event: WheelEvent): void => {\n      if (!event.ctrlKey && !event.metaKey) return;\n\n      event.preventDefault();\n      let delta = -event.deltaY;\n\n      switch (event.deltaMode) {\n        case WheelEvent.DOM_DELTA_PAGE:\n          delta *= window.innerHeight;\n          break;\n        case WheelEvent.DOM_DELTA_LINE:\n          delta *= 20;\n          break;\n        default:\n          break;\n      }\n\n      pendingDelta += delta;\n      cancelAnimationFrame(nextFrame);\n      nextFrame = requestAnimationFrame(onFrame);\n    };\n\n    window.addEventListener('wheel', onWheel, { passive: false });\n\n    return () => {\n      window.removeEventListener('wheel', onWheel);\n      cancelAnimationFrame(nextFrame);\n    };\n  }, []);\n}\n"]}

package/dist/components/trace-viewer/worker.d.ts

@@ -1,2 +0,0 @@
-export {};
-//# sourceMappingURL=worker.d.ts.map

package/dist/components/trace-viewer/worker.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"worker.d.ts","sourceRoot":"","sources":["../../../src/components/trace-viewer/worker.ts"],"names":[],"mappings":""}

package/dist/components/trace-viewer/worker.js

@@ -1,109 +0,0 @@
-import { addToRow } from './util/tree';
-// The most recent requestId
-let requestId = 0;
-self.addEventListener('message', (event) => {
-    const data = event.data;
-    requestId = Math.max(requestId, data?.requestId || 0);
-    switch (data.type) {
-        case 'calculateSpanPositions':
-            calculateSpanPositions(data.root);
-            break;
-        case 'filterSpans':
-            filterSpans(data.root, data.filter);
-            break;
-        default:
-            break;
-    }
-});
-const positionHelper = (node, pending) => {
-    if ('parent' in node) {
-        const n = node;
-        n.row = -1;
-        n.isVisible = true;
-        pending.push(n);
-    }
-    const sortedChildren = node.children
-        .slice()
-        .sort((a, b) => a.startTime - b.startTime || b.duration - a.duration);
-    for (const child of sortedChildren) {
-        positionHelper(child, pending);
-    }
-};
-const calculateSpanPositions = (root) => {
-    const responseId = requestId;
-    const placed = [];
-    const pending = [];
-    positionHelper(root, pending);
-    let lastFlushT = Date.now() - 10;
-    let lastFlushC = -64;
-    let count = 0;
-    const flush = () => {
-        for (const row of placed) {
-            row.sort((a, b) => a.startTime - b.startTime);
-        }
-        const message = {
-            requestId: responseId,
-            type: 'setRowsResult',
-            rows: placed,
-            isEnd: !pending.length,
-        };
-        postMessage(message);
-        lastFlushT = Date.now();
-        lastFlushC = count;
-    };
-    while (true) {
-        const node = pending.shift();
-        if (!node) {
-            flush();
-            return;
-        }
-        addToRow(placed, node, 0.001);
-        ++count;
-        if (Date.now() - lastFlushT >= 15 || count - lastFlushC >= 256) {
-            flush();
-        }
-    }
-};
-const ATTR_FILTER_REGEX = /(?<=^|\s)(?<pair>(?<key>[\w.]+):(?<value>\S*))/g;
-const filterSpans = (root, filter) => {
-    const responseId = requestId;
-    const matches = new Set();
-    const name = filter
-        .replace(ATTR_FILTER_REGEX, '')
-        .replace(/\s{2,}/g, ' ')
-        .trim();
-    const attrs = [];
-    for (const m of filter.matchAll(ATTR_FILTER_REGEX)) {
-        const { key = '', value = '' } = m.groups || {};
-        attrs.push([key, value.toLocaleLowerCase()]);
-    }
-    const match = (span) => {
-        const nameMatch = span.name.toLocaleLowerCase().includes(name) ||
-            span.spanId.toLocaleLowerCase().includes(name);
-        if (!nameMatch)
-            return false;
-        // TODO: support resource attribute filtering
-        return attrs.every(([key, value]) => {
-            const v = span.attributes[key];
-            if (!v)
-                return false;
-            return String(v).toLocaleLowerCase().includes(value);
-        });
-    };
-    const helper = (node) => {
-        for (const child of node.children) {
-            if (match(child.span)) {
-                matches.add(child.span.spanId);
-            }
-            helper(child);
-        }
-    };
-    helper(root);
-    const message = {
-        requestId: responseId,
-        type: 'updateHighlight',
-        matches,
-    };
-    postMessage(message);
-};
-//# sourceMappingURL=worker.js.map

package/dist/components/trace-viewer/worker.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"worker.js","sourceRoot":"","sources":["../../../src/components/trace-viewer/worker.ts"],"names":[],"mappings":"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","sourcesContent":["import type {\n  RootNode,\n  Span,\n  TraceNode,\n  VisibleSpan,\n  WorkerRequest,\n  WorkerResponse,\n} from './types';\nimport { addToRow } from './util/tree';\n\n// The most recent requestId\nlet requestId = 0;\n\nself.addEventListener('message', (event) => {\n  const data = event.data as WorkerRequest;\n  requestId = Math.max(requestId, data?.requestId || 0);\n\n  switch (data.type) {\n    case 'calculateSpanPositions':\n      calculateSpanPositions(data.root);\n      break;\n    case 'filterSpans':\n      filterSpans(data.root, data.filter);\n      break;\n    default:\n      break;\n  }\n});\n\nconst positionHelper = (node: TraceNode, pending: VisibleSpan[]): void => {\n  if ('parent' in node) {\n    const n = node as VisibleSpan;\n    n.row = -1;\n    n.isVisible = true;\n    pending.push(n);\n  }\n\n  const sortedChildren = node.children\n    .slice()\n    .sort((a, b) => a.startTime - b.startTime || b.duration - a.duration);\n  for (const child of sortedChildren) {\n    positionHelper(child, pending);\n  }\n};\n\nconst calculateSpanPositions = (root: RootNode): void => {\n  const responseId = requestId;\n  const placed: VisibleSpan[][] = [];\n  const pending: VisibleSpan[] = [];\n\n  positionHelper(root, pending);\n\n  let lastFlushT = Date.now() - 10;\n  let lastFlushC = -64;\n  let count = 0;\n  const flush = (): void => {\n    for (const row of placed) {\n      row.sort((a, b) => a.startTime - b.startTime);\n    }\n    const message: WorkerResponse = {\n      requestId: responseId,\n      type: 'setRowsResult',\n      rows: placed,\n      isEnd: !pending.length,\n    };\n    postMessage(message);\n    lastFlushT = Date.now();\n    lastFlushC = count;\n  };\n\n  while (true) {\n    const node = pending.shift();\n    if (!node) {\n      flush();\n      return;\n    }\n    addToRow(placed, node, 0.001);\n    ++count;\n    if (Date.now() - lastFlushT >= 15 || count - lastFlushC >= 256) {\n      flush();\n    }\n  }\n};\n\nconst ATTR_FILTER_REGEX = /(?<=^|\\s)(?<pair>(?<key>[\\w.]+):(?<value>\\S*))/g;\n\nconst filterSpans = (root: RootNode, filter: string): void => {\n  const responseId = requestId;\n\n  const matches = new Set<string>();\n\n  const name = filter\n    .replace(ATTR_FILTER_REGEX, '')\n    .replace(/\\s{2,}/g, ' ')\n    .trim();\n  const attrs: [string, string][] = [];\n  for (const m of filter.matchAll(ATTR_FILTER_REGEX)) {\n    const { key = '', value = '' } = m.groups || {};\n    attrs.push([key, value.toLocaleLowerCase()]);\n  }\n\n  const match = (span: Span): boolean => {\n    const nameMatch =\n      span.name.toLocaleLowerCase().includes(name) ||\n      span.spanId.toLocaleLowerCase().includes(name);\n    if (!nameMatch) return false;\n    // TODO: support resource attribute filtering\n    return attrs.every(([key, value]) => {\n      const v = span.attributes[key];\n      if (!v) return false;\n      return String(v).toLocaleLowerCase().includes(value);\n    });\n  };\n\n  const helper = (node: TraceNode): void => {\n    for (const child of node.children) {\n      if (match(child.span)) {\n        matches.add(child.span.spanId);\n      }\n      helper(child);\n    }\n  };\n  helper(root);\n\n  const message: WorkerResponse = {\n    requestId: responseId,\n    type: 'updateHighlight',\n    matches,\n  };\n  postMessage(message);\n};\n"]}

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

@@ -1 +0,0 @@
-{"version":3,"file":"trace-viewer-new.d.ts","sourceRoot":"","sources":["../../src/components/trace-viewer-new.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,wBAAwB,CAAC;AAC1D,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,iBAAiB,CAAC;AAG7C,OAAO,EAEL,KAAK,uBAAuB,EAC7B,MAAM,gCAAgC,CAAC;AAGxC,QAAA,MAAM,cAAc,GAAI,+BAIrB;IACD,GAAG,EAAE,WAAW,CAAC;IACjB,MAAM,EAAE,KAAK,EAAE,CAAC;IAChB,WAAW,EAAE,uBAAuB,CAAC;CACtC,4CA2BA,CAAC;AAEF,OAAO,EAAE,cAAc,EAAE,CAAC"}

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

@@ -1,23 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { useMemo } from 'react';
-import { buildTrace } from '../lib/trace-builder';
-import { NewTraceViewer as NewTraceViewerComponent } from './new-trace-viewer/trace-viewer';
-import { SidebarDataProvider, } from './sidebar/sidebar-data-context';
-const NewTraceViewer = ({ run, events, sidebarData, }) => {
-    // Build trace only when actual data changes — no timer-driven rebuilds.
-    // Active span widths are animated imperatively by useLiveTick at 60fps.
-    const traceWithMeta = useMemo(() => {
-        if (!run?.runId) {
-            return undefined;
-        }
-        return buildTrace(run, events, new Date());
-        // eslint-disable-next-line react-hooks/exhaustive-deps -- `new Date()` is intentionally not a dep; useLiveTick handles live growth
-    }, [run, events]);
-    const trace = traceWithMeta;
-    if (!trace) {
-        return (_jsx("div", { className: "relative w-full h-full flex items-center justify-center", children: _jsx("div", { className: "text-gray-500 text-sm", children: "Loading trace\u2026" }) }));
-    }
-    return (_jsx(SidebarDataProvider, { value: sidebarData, children: _jsx("div", { className: "relative w-full h-full flex", children: _jsx(NewTraceViewerComponent, { trace: trace }) }) }));
-};
-export { NewTraceViewer };
-//# sourceMappingURL=trace-viewer-new.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"trace-viewer-new.js","sourceRoot":"","sources":["../../src/components/trace-viewer-new.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AAGhC,OAAO,EAAE,UAAU,EAAsB,MAAM,sBAAsB,CAAC;AACtE,OAAO,EAAE,cAAc,IAAI,uBAAuB,EAAE,MAAM,iCAAiC,CAAC;AAC5F,OAAO,EACL,mBAAmB,GAEpB,MAAM,gCAAgC,CAAC;AAGxC,MAAM,cAAc,GAAG,CAAC,EACtB,GAAG,EACH,MAAM,EACN,WAAW,GAKZ,EAAE,EAAE;IACH,wEAAwE;IACxE,wEAAwE;IACxE,MAAM,aAAa,GAA8B,OAAO,CAAC,GAAG,EAAE;QAC5D,IAAI,CAAC,GAAG,EAAE,KAAK,EAAE,CAAC;YAChB,OAAO,SAAS,CAAC;QACnB,CAAC;QACD,OAAO,UAAU,CAAC,GAAG,EAAE,MAAM,EAAE,IAAI,IAAI,EAAE,CAAC,CAAC;QAC3C,mIAAmI;IACrI,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,CAAC,CAAC,CAAC;IAClB,MAAM,KAAK,GAAG,aAAa,CAAC;IAE5B,IAAI,CAAC,KAAK,EAAE,CAAC;QACX,OAAO,CACL,cAAK,SAAS,EAAC,yDAAyD,YACtE,cAAK,SAAS,EAAC,uBAAuB,oCAAqB,GACvD,CACP,CAAC;IACJ,CAAC;IAED,OAAO,CACL,KAAC,mBAAmB,IAAC,KAAK,EAAE,WAAW,YACrC,cAAK,SAAS,EAAC,6BAA6B,YAC1C,KAAC,uBAAuB,IAAC,KAAK,EAAE,KAAc,GAAI,GAC9C,GACc,CACvB,CAAC;AACJ,CAAC,CAAC;AAEF,OAAO,EAAE,cAAc,EAAE,CAAC","sourcesContent":["import { useMemo } from 'react';\nimport type { WorkflowRun } from '@workflow/core/runtime';\nimport type { Event } from '@workflow/world';\nimport { buildTrace, type TraceWithMeta } from '../lib/trace-builder';\nimport { NewTraceViewer as NewTraceViewerComponent } from './new-trace-viewer/trace-viewer';\nimport {\n  SidebarDataProvider,\n  type SidebarDataContextValue,\n} from './sidebar/sidebar-data-context';\nimport type { Trace } from './trace-viewer/types';\n\nconst NewTraceViewer = ({\n  run,\n  events,\n  sidebarData,\n}: {\n  run: WorkflowRun;\n  events: Event[];\n  sidebarData: SidebarDataContextValue;\n}) => {\n  // Build trace only when actual data changes — no timer-driven rebuilds.\n  // Active span widths are animated imperatively by useLiveTick at 60fps.\n  const traceWithMeta: TraceWithMeta | undefined = useMemo(() => {\n    if (!run?.runId) {\n      return undefined;\n    }\n    return buildTrace(run, events, new Date());\n    // eslint-disable-next-line react-hooks/exhaustive-deps -- `new Date()` is intentionally not a dep; useLiveTick handles live growth\n  }, [run, events]);\n  const trace = traceWithMeta;\n\n  if (!trace) {\n    return (\n      <div className=\"relative w-full h-full flex items-center justify-center\">\n        <div className=\"text-gray-500 text-sm\">Loading trace…</div>\n      </div>\n    );\n  }\n\n  return (\n    <SidebarDataProvider value={sidebarData}>\n      <div className=\"relative w-full h-full flex\">\n        <NewTraceViewerComponent trace={trace as Trace} />\n      </div>\n    </SidebarDataProvider>\n  );\n};\n\nexport { NewTraceViewer };\n"]}

package/dist/components/ui/alert.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"alert.js","sourceRoot":"","sources":["../../../src/components/ui/alert.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAqB,MAAM,0BAA0B,CAAC;AAClE,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,EAAE,EAAE,MAAM,iBAAiB,CAAC;AAErC,MAAM,aAAa,GAAG,GAAG,CACvB,mIAAmI,EACnI;IACE,QAAQ,EAAE;QACR,OAAO,EAAE;YACP,OAAO,EAAE,EAAE;YACX,WAAW,EACT,sEAAsE;SACzE;KACF;IACD,eAAe,EAAE;QACf,OAAO,EAAE,SAAS;KACnB;CACF,CACF,CAAC;AAEF,MAAM,KAAK,GAAG,KAAK,CAAC,UAAU,CAG5B,CAAC,EAAE,SAAS,EAAE,OAAO,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,EAAE,EAAE,CAAC,CAC3C,cACE,GAAG,EAAE,GAAG,EACR,IAAI,EAAC,OAAO,EACZ,SAAS,EAAE,EAAE,CAAC,aAAa,CAAC,EAAE,OAAO,EAAE,CAAC,EAAE,SAAS,CAAC,KAChD,KAAK,GACT,CACH,CAAC,CAAC;AACH,KAAK,CAAC,WAAW,GAAG,OAAO,CAAC;AAE5B,MAAM,UAAU,GAAG,KAAK,CAAC,UAAU,CAGjC,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,EAAE,EAAE,CAAC,CAClC,aACE,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CAAC,8CAA8C,EAAE,SAAS,CAAC,KACpE,KAAK,GACT,CACH,CAAC,CAAC;AACH,UAAU,CAAC,WAAW,GAAG,YAAY,CAAC;AAEtC,MAAM,gBAAgB,GAAG,KAAK,CAAC,UAAU,CAGvC,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,EAAE,EAAE,CAAC,CAClC,cACE,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CAAC,+BAA+B,EAAE,SAAS,CAAC,KACrD,KAAK,GACT,CACH,CAAC,CAAC;AACH,gBAAgB,CAAC,WAAW,GAAG,kBAAkB,CAAC;AAElD,OAAO,EAAE,KAAK,EAAE,UAAU,EAAE,gBAAgB,EAAE,CAAC","sourcesContent":["import { cva, type VariantProps } from 'class-variance-authority';\nimport * as React from 'react';\n\nimport { cn } from '../../lib/utils';\n\nconst alertVariants = cva(\n  'relative w-full rounded-lg border p-4 [&>svg~*]:pl-7 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4',\n  {\n    variants: {\n      variant: {\n        default: '',\n        destructive:\n          'border-red-400 text-red-900 dark:border-red-700 [&>svg]:text-red-900',\n      },\n    },\n    defaultVariants: {\n      variant: 'default',\n    },\n  }\n);\n\nconst Alert = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement> & VariantProps<typeof alertVariants>\n>(({ className, variant, ...props }, ref) => (\n  <div\n    ref={ref}\n    role=\"alert\"\n    className={cn(alertVariants({ variant }), className)}\n    {...props}\n  />\n));\nAlert.displayName = 'Alert';\n\nconst AlertTitle = React.forwardRef<\n  HTMLParagraphElement,\n  React.HTMLAttributes<HTMLHeadingElement>\n>(({ className, ...props }, ref) => (\n  <h5\n    ref={ref}\n    className={cn('mb-1 font-medium leading-none tracking-tight', className)}\n    {...props}\n  />\n));\nAlertTitle.displayName = 'AlertTitle';\n\nconst AlertDescription = React.forwardRef<\n  HTMLParagraphElement,\n  React.HTMLAttributes<HTMLParagraphElement>\n>(({ className, ...props }, ref) => (\n  <div\n    ref={ref}\n    className={cn('text-sm [&_p]:leading-relaxed', className)}\n    {...props}\n  />\n));\nAlertDescription.displayName = 'AlertDescription';\n\nexport { Alert, AlertTitle, AlertDescription };\n"]}

package/dist/components/ui/card.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"card.js","sourceRoot":"","sources":["../../../src/components/ui/card.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,EAAE,EAAE,MAAM,iBAAiB,CAAC;AAErC,MAAM,IAAI,GAAG,KAAK,CAAC,UAAU,CAG3B,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,EAAE,EAAE,CAAC,CAClC,cACE,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CAAC,6BAA6B,EAAE,SAAS,CAAC,KACnD,KAAK,GACT,CACH,CAAC,CAAC;AACH,IAAI,CAAC,WAAW,GAAG,MAAM,CAAC;AAE1B,MAAM,UAAU,GAAG,KAAK,CAAC,UAAU,CAGjC,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,EAAE,EAAE,CAAC,CAClC,cACE,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CAAC,+BAA+B,EAAE,SAAS,CAAC,KACrD,KAAK,GACT,CACH,CAAC,CAAC;AACH,UAAU,CAAC,WAAW,GAAG,YAAY,CAAC;AAEtC,MAAM,SAAS,GAAG,KAAK,CAAC,UAAU,CAGhC,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,EAAE,EAAE,CAAC,CAClC,cACE,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CACX,oDAAoD,EACpD,SAAS,CACV,KACG,KAAK,GACT,CACH,CAAC,CAAC;AACH,SAAS,CAAC,WAAW,GAAG,WAAW,CAAC;AAEpC,MAAM,eAAe,GAAG,KAAK,CAAC,UAAU,CAGtC,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,EAAE,EAAE,CAAC,CAClC,cACE,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CAAC,SAAS,EAAE,SAAS,CAAC,EACnC,KAAK,EAAE,EAAE,KAAK,EAAE,oBAAoB,EAAE,KAClC,KAAK,GACT,CACH,CAAC,CAAC;AACH,eAAe,CAAC,WAAW,GAAG,iBAAiB,CAAC;AAEhD,MAAM,WAAW,GAAG,KAAK,CAAC,UAAU,CAGlC,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,EAAE,EAAE,CAAC,CAClC,cAAK,GAAG,EAAE,GAAG,EAAE,SAAS,EAAE,EAAE,CAAC,UAAU,EAAE,SAAS,CAAC,KAAM,KAAK,GAAI,CACnE,CAAC,CAAC;AACH,WAAW,CAAC,WAAW,GAAG,aAAa,CAAC;AAExC,MAAM,UAAU,GAAG,KAAK,CAAC,UAAU,CAGjC,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,EAAE,EAAE,CAAC,CAClC,cACE,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CAAC,4BAA4B,EAAE,SAAS,CAAC,KAClD,KAAK,GACT,CACH,CAAC,CAAC;AACH,UAAU,CAAC,WAAW,GAAG,YAAY,CAAC;AAEtC,OAAO,EACL,IAAI,EACJ,UAAU,EACV,UAAU,EACV,SAAS,EACT,eAAe,EACf,WAAW,GACZ,CAAC","sourcesContent":["'use client';\n\nimport * as React from 'react';\n\nimport { cn } from '../../lib/utils';\n\nconst Card = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n  <div\n    ref={ref}\n    className={cn('rounded-lg border shadow-sm', className)}\n    {...props}\n  />\n));\nCard.displayName = 'Card';\n\nconst CardHeader = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n  <div\n    ref={ref}\n    className={cn('flex flex-col space-y-1.5 p-6', className)}\n    {...props}\n  />\n));\nCardHeader.displayName = 'CardHeader';\n\nconst CardTitle = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n  <div\n    ref={ref}\n    className={cn(\n      'text-2xl font-semibold leading-none tracking-tight',\n      className\n    )}\n    {...props}\n  />\n));\nCardTitle.displayName = 'CardTitle';\n\nconst CardDescription = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n  <div\n    ref={ref}\n    className={cn('text-sm', className)}\n    style={{ color: 'var(--ds-gray-900)' }}\n    {...props}\n  />\n));\nCardDescription.displayName = 'CardDescription';\n\nconst CardContent = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n  <div ref={ref} className={cn('p-6 pt-0', className)} {...props} />\n));\nCardContent.displayName = 'CardContent';\n\nconst CardFooter = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n  <div\n    ref={ref}\n    className={cn('flex items-center p-6 pt-0', className)}\n    {...props}\n  />\n));\nCardFooter.displayName = 'CardFooter';\n\nexport {\n  Card,\n  CardHeader,\n  CardFooter,\n  CardTitle,\n  CardDescription,\n  CardContent,\n};\n"]}