@weng-lab/visualization 2.5.0 → 2.5.1

package/dist/visualization.es43.js.map

@@ -1 +1 @@
-{"version":3,"file":"visualization.es43.js","sources":["../src/components/ScatterPlot/ScatterPlotViewport.tsx"],"sourcesContent":["import React, { useCallback, useEffect, useMemo, useRef, useState } from \"react\";\nimport CircularProgress from \"@mui/material/CircularProgress\";\nimport { Box, Stack } from \"@mui/material\";\nimport { Group } from \"@visx/group\";\nimport { AxisBottom, AxisLeft, AxisRight, AxisTop } from \"@visx/axis\";\nimport { LinePath } from \"@visx/shape\";\nimport { Text } from \"@visx/text\";\nimport { curveBasis } from \"@visx/curve\";\nimport { localPoint } from \"@visx/event\";\nimport { ScaleLinear } from \"@visx/vendor/d3-scale\";\nimport { BackgroundGradient, ChartProps, CrosshairPosition, Point, SelectionMode, ZoomType } from \"./types\";\nimport { DEFAULT_HOVER_STYLE, drawCanvasPoint, getTicks, isPointVisible, partitionPointsByHover, prepareCanvas, rescaleX, rescaleY } from \"./helpers\";\nimport { useStableCallback } from \"../../hooks\";\nimport AnimatedPoints from \"./AnimatedPoints\";\nimport PointLabels from \"./PointLabels\";\nimport GradientLegend from \"./GradientLegend\";\nimport Crosshair from \"./Crosshair\";\nimport { useDragSelection } from \"./hooks/useDragSelection\";\n\ntype ScatterPlotViewportProps<T extends object> = {\n    width: number;\n    height: number;\n    margin: { top: number; left: number };\n    boundedWidth: number;\n    boundedHeight: number;\n    loading: boolean;\n    pointData: Point<T>[];\n    animation?: ChartProps<T, boolean | undefined, boolean | undefined>[\"animation\"];\n    animationGroupSize?: number;\n    animationBuffer?: number;\n    xScale: ScaleLinear<number, number, never>;\n    yScale: ScaleLinear<number, number, never>;\n    zoom: ZoomType;\n    selectMode: SelectionMode;\n    selectable: boolean;\n    disableZoom?: boolean;\n    groupPointsAnchor?: keyof Point<T> | keyof T;\n    hoveredPoint: Point<T> | null;\n    hoveredPoints?: Point<T>[];\n    hoverGrowth?: number;\n    hoverStroke?: string;\n    handleMouseMove: (event: React.MouseEvent<SVGElement>, zoom: ZoomType) => void;\n    handleMouseLeave: () => void;\n    onDisplayedPointsChange?: (points: Point<T>[]) => void;\n    onSelectionChange?: (selectedPoints: Point<T>[]) => void;\n    onPointClicked?: (point: Point<T>) => void;\n    leftAxisLabel?: string;\n    bottomAxisLabel?: string;\n    border: boolean;\n    originLine?: boolean;\n    backgroundGradient?: BackgroundGradient;\n    /** Crosshair position in data coordinates, or null for no crosshair. */\n    crosshair?: CrosshairPosition | null;\n    divRef: React.RefObject<HTMLDivElement | null>;\n};\n\n/**\n * Hover growth eases in over this long, and is dropped instantly on the way out.\n * Easing the exit too would drag a tail of still-shrinking points behind the cursor\n * whenever it sweeps across a dense plot.\n */\nconst HOVER_GROW_MS = 120;\n\nconst easeOutCubic = (t: number) => 1 - Math.pow(1 - t, 3);\n\nconst ScatterPlotViewport = <T extends object>({\n    width,\n    height,\n    margin,\n    boundedWidth,\n    boundedHeight,\n    loading,\n    pointData,\n    animation,\n    animationGroupSize,\n    animationBuffer,\n    xScale,\n    yScale,\n    zoom,\n    selectMode,\n    selectable,\n    disableZoom,\n    groupPointsAnchor,\n    hoveredPoint,\n    hoveredPoints,\n    hoverGrowth,\n    hoverStroke,\n    handleMouseMove,\n    handleMouseLeave,\n    onDisplayedPointsChange,\n    onSelectionChange,\n    onPointClicked,\n    leftAxisLabel,\n    bottomAxisLabel,\n    border,\n    originLine,\n    backgroundGradient,\n    crosshair,\n    divRef,\n}: ScatterPlotViewportProps<T>) => {\n    const graphRef = useRef<SVGRectElement | null>(null);\n    const canvasRef = useRef<HTMLCanvasElement | null>(null);\n    // Hover growth is driven straight onto the canvas through a ref. A redraw is ~0.3ms at\n    // 3.4k points so the drawing is cheap, but a re-render per frame would not be.\n    const hoverAmountRef = useRef(0);\n    const animatedKeysRef = useRef<Set<string> | null>(null);\n    // When the current hover began, so its growth can be resumed rather than restarted if the\n    // effect driving it is re-run partway through.\n    const hoverStartedAtRef = useRef(0);\n\n    // Animation state — viewport owns what it renders\n    const [showPointAnimation, setShowPointAnimation] = useState(Boolean(animation));\n\n    useEffect(() => {\n        if (!animation) return;\n        if (pointData.length > 2500) {\n            setShowPointAnimation(false);\n            return;\n        }\n        const duration = 450;\n        const buffer = (animationBuffer ?? 0.03) * 1000;\n        const groups = Math.ceil(pointData.length / (animationGroupSize ?? 1));\n        const total = duration + groups * buffer;\n\n        const t = window.setTimeout(() => setShowPointAnimation(false), total);\n        return () => window.clearTimeout(t);\n    }, [animation, animationBuffer, animationGroupSize, pointData.length]);\n\n    const { lines, isDragging, x, y, dx, dy, dragStart, dragMove, dragEnd, completeSelection } =\n        useDragSelection({ pointData, margin, xScale, yScale, onSelectionChange });\n\n    // Passive event listeners to prevent default scroll/touch behavior on the chart surface\n    useEffect(() => {\n        const graphElement = graphRef.current;\n\n        const handleWheel = (event: WheelEvent) => { event.preventDefault(); };\n        const handleTouchMove = (event: TouchEvent) => { event.preventDefault(); };\n        const handleTouchStart = (event: TouchEvent) => { event.preventDefault(); };\n\n        if (graphElement) {\n            graphElement.addEventListener('wheel', handleWheel, { passive: false });\n            graphElement.addEventListener('touchstart', handleTouchStart, { passive: false });\n            graphElement.addEventListener('touchmove', handleTouchMove, { passive: false });\n        }\n\n        return () => {\n            if (graphElement) {\n                graphElement.removeEventListener('wheel', handleWheel);\n                graphElement.removeEventListener('touchstart', handleTouchStart);\n                graphElement.removeEventListener('touchmove', handleTouchMove);\n            }\n        };\n    }, []);\n\n    const xScaleTransformed = useMemo(\n        () => rescaleX(xScale, zoom.transformMatrix.translateX, zoom.transformMatrix.scaleX),\n        [xScale, zoom.transformMatrix]\n    );\n    const yScaleTransformed = useMemo(\n        () => rescaleY(yScale, zoom.transformMatrix.translateY, zoom.transformMatrix.scaleY),\n        [yScale, zoom.transformMatrix]\n    );\n\n    // What is hovered: the point under the cursor if there is one, otherwise whatever the\n    // consumer has asked to highlight. The cursor takes precedence so the plot's own hover is\n    // never overridden mid-gesture.\n    const highlightSeeds: Point<T>[] = useMemo(\n        () => (hoveredPoint ? [hoveredPoint] : hoveredPoints ?? []),\n        [hoveredPoint, hoveredPoints]\n    );\n\n    const groupedPoints: Point<T>[] = useMemo(() => {\n        const anchor = groupPointsAnchor;\n        if (!anchor) return highlightSeeds;\n\n        const anchorValue = (point: Point<T>): unknown =>\n            anchor in point\n                ? point[anchor as keyof Point<T>]\n                : point.metaData?.[anchor as keyof T];\n\n        // Collect the seeds' anchor values first, so this stays O(points + seeds). Matching each\n        // point against each seed would be 2.5m comparisons when a whole 750-point group is\n        // handed in against 3.4k points.\n        const seedValues = new Set(\n            highlightSeeds.map(anchorValue).filter((value) => value !== undefined)\n        );\n        if (seedValues.size === 0) return [];\n\n        return pointData.filter((point) => {\n            const value = anchorValue(point);\n            return value !== undefined && seedValues.has(value);\n        });\n    }, [highlightSeeds, groupPointsAnchor, pointData]);\n\n    const previousHoveredKeysRef = useRef<Set<string>>(new Set());\n\n    const hoveredPointKeys = useMemo(() => {\n        const next = new Set(groupedPoints.map((point) => `${point.x},${point.y}`));\n        const previous = previousHoveredKeysRef.current;\n\n        // Moving between points inside one anchored group rebuilds this set, but its contents\n        // are unchanged - the hovered group is the same group. Handing back the previous Set\n        // keeps its identity stable, so the redraw effect and the hover growth it drives both\n        // sit still instead of restarting on every point the cursor crosses. Purely a\n        // memoisation hint: the contents are correct either way.\n        if (next.size === previous.size && [...next].every((key) => previous.has(key))) {\n            return previous;\n        }\n\n        previousHoveredKeysRef.current = next;\n        return next;\n    }, [groupedPoints]);\n\n    const currentDisplayedPoints = useMemo(\n        () => pointData.filter((point) => {\n            const tx = xScaleTransformed(point.x);\n            const ty = yScaleTransformed(point.y);\n            return tx >= 0 && tx <= boundedWidth && ty >= 0 && ty <= boundedHeight;\n        }),\n        [pointData, xScaleTransformed, yScaleTransformed, boundedWidth, boundedHeight]\n    );\n\n    // Held together as one object so the draw below depends on a single stable value rather than\n    // on two props that would each have to be threaded into its dependencies.\n    const hoverStyle = useMemo(\n        () => ({\n            growth: hoverGrowth ?? DEFAULT_HOVER_STYLE.growth,\n            stroke: hoverStroke ?? DEFAULT_HOVER_STYLE.stroke,\n        }),\n        [hoverGrowth, hoverStroke]\n    );\n\n    const drawPoints = useCallback((\n        xST: ScaleLinear<number, number, never>,\n        yST: ScaleLinear<number, number, never>,\n        canvas: HTMLCanvasElement\n    ) => {\n        const context = canvas.getContext('2d');\n        if (!context) return;\n\n        prepareCanvas(context, boundedWidth, boundedHeight);\n\n        if (backgroundGradient) {\n            const [colorLow, colorMid, colorHigh] = backgroundGradient.colorScale ?? [\"red\", \"white\", \"blue\"];\n            const W = boundedWidth;\n            const H = boundedHeight;\n            const x0 = xST(0);\n            const y0 = yST(0);\n            const fraction = Math.max(0.001, Math.min(0.999, (x0 * W - y0 * H + H * H) / (W * W + H * H)));\n            const gradient = context.createLinearGradient(0, H, W, 0);\n            gradient.addColorStop(0, colorLow);\n            gradient.addColorStop(fraction, colorMid);\n            gradient.addColorStop(1, colorHigh);\n            context.globalAlpha = backgroundGradient.opacity ?? 1;\n            context.fillStyle = gradient;\n            context.fillRect(0, 0, W, H);\n            context.globalAlpha = 1;\n        }\n\n        const { nonHovered, hovered } = partitionPointsByHover(pointData, hoveredPointKeys);\n\n        const drawRenderedPoint = (point: Point<T>, isHovered: boolean) => {\n            const transformedX = xST(point.x);\n            const transformedY = yST(point.y);\n            if (!isPointVisible(transformedX, transformedY, boundedWidth, boundedHeight)) return;\n            drawCanvasPoint(context, point, transformedX, transformedY, isHovered ? hoverAmountRef.current : 0, hoverStyle);\n        };\n\n        nonHovered.forEach((point) => drawRenderedPoint(point, false));\n        hovered.forEach((point) => drawRenderedPoint(point, true));\n    }, [boundedHeight, boundedWidth, hoveredPointKeys, pointData, backgroundGradient, hoverStyle]);\n\n    useEffect(() => {\n        const canvas = canvasRef.current;\n        if (!canvas || showPointAnimation) return;\n\n        // Leaving is instant: drop the growth and repaint once.\n        if (hoveredPointKeys.size === 0) {\n            animatedKeysRef.current = null;\n            hoverAmountRef.current = 0;\n            drawPoints(xScaleTransformed, yScaleTransformed, canvas);\n            return;\n        }\n\n        // Only a change of hovered set starts the growth. This effect also runs on pan, zoom and\n        // data changes, which should carry on from the size the points have already reached\n        // rather than snapping them back to zero.\n        const sameHover = animatedKeysRef.current === hoveredPointKeys;\n        if (!sameHover) {\n            animatedKeysRef.current = hoveredPointKeys;\n            hoverStartedAtRef.current = performance.now();\n            hoverAmountRef.current = 0;\n        }\n\n        const startedAt = hoverStartedAtRef.current;\n\n        // Already fully grown: repaint at full size without scheduling a frame, so a pan over a\n        // hovered point does not queue one per move.\n        if (sameHover && performance.now() - startedAt >= HOVER_GROW_MS) {\n            hoverAmountRef.current = 1;\n            drawPoints(xScaleTransformed, yScaleTransformed, canvas);\n            return;\n        }\n\n        // Timed from when this hover began rather than from now, so an animation interrupted\n        // partway - by new pointData arriving under the cursor, most often - resumes where it\n        // left off instead of restarting. Before this was kept in a ref, the cleanup below\n        // cancelled the frame and the sameHover branch above returned without scheduling\n        // another, leaving the point frozen at whatever growth it had reached: on the first\n        // frame, none at all, drawn with a ring at a tenth of its opacity.\n        let frame = requestAnimationFrame(function step() {\n            const t = Math.min(1, (performance.now() - startedAt) / HOVER_GROW_MS);\n            hoverAmountRef.current = easeOutCubic(t);\n            drawPoints(xScaleTransformed, yScaleTransformed, canvas);\n            if (t < 1) frame = requestAnimationFrame(step);\n        });\n\n        return () => cancelAnimationFrame(frame);\n    }, [drawPoints, xScaleTransformed, yScaleTransformed, showPointAnimation, hoveredPointKeys]);\n\n    const handlePointClick = useCallback(() => {\n        if (hoveredPoint) onPointClicked?.(hoveredPoint);\n    }, [hoveredPoint, onPointClicked]);\n\n    const surfaceCursor = disableZoom\n        ? selectable\n            ? isDragging ? 'none' : 'crosshair'\n            : isDragging ? 'none' : 'default'\n        : hoveredPoint\n            ? 'default'\n            : selectMode === 'select'\n                ? isDragging ? 'none' : 'crosshair'\n                : zoom.isDragging\n                    ? 'grabbing'\n                    : 'grab';\n\n    const handleSelectionEnd = (event: React.MouseEvent<SVGRectElement> | React.TouchEvent<SVGRectElement>) => {\n        dragEnd(event);\n        completeSelection(zoom);\n    };\n\n    /**\n     * Panning is coalesced to one zoom update per animation frame.\n     *\n     * zoom.dragMove sets the transform matrix on every move it is handed, and a mouse reports\n     * positions faster than the browser paints. Because mousemove is a continuous event that\n     * React flushes synchronously - and because a shared zoom sits above every synced plot, so\n     * one update re-renders all of them - handling each move outright never lets the browser\n     * paint, and React eventually warns that the update depth was exceeded.\n     *\n     * The buffer holds nativeEvent rather than the synthetic event: React clears currentTarget\n     * once dispatch returns, and this runs a frame later. Routing through useStableCallback\n     * keeps the frame calling the current zoom rather than the one captured when it was queued.\n     */\n    const dragFrameRef = useRef<number | null>(null);\n    const pendingDragRef = useRef<MouseEvent | TouchEvent | null>(null);\n    const dragMoveLatest = useStableCallback((event: MouseEvent | TouchEvent) => {\n        zoom.dragMove(event as unknown as React.MouseEvent | React.TouchEvent);\n    });\n\n    const flushPendingDrag = useCallback(() => {\n        if (dragFrameRef.current !== null) {\n            cancelAnimationFrame(dragFrameRef.current);\n            dragFrameRef.current = null;\n        }\n        const pending = pendingDragRef.current;\n        pendingDragRef.current = null;\n        if (pending) dragMoveLatest(pending);\n    }, [dragMoveLatest]);\n\n    useEffect(() => () => {\n        if (dragFrameRef.current !== null) cancelAnimationFrame(dragFrameRef.current);\n    }, []);\n\n    const onZoomDragMove = (event: React.MouseEvent<SVGRectElement> | React.TouchEvent<SVGRectElement>) => {\n        pendingDragRef.current = event.nativeEvent;\n        if (dragFrameRef.current !== null) return;\n        dragFrameRef.current = requestAnimationFrame(() => {\n            dragFrameRef.current = null;\n            const pending = pendingDragRef.current;\n            pendingDragRef.current = null;\n            if (pending) dragMoveLatest(pending);\n        });\n    };\n\n    // The queued frame is applied before the gesture closes, so the plot lands on the position\n    // the pointer was actually released at rather than a frame behind it.\n    const onZoomDragEnd = () => {\n        flushPendingDrag();\n        zoom.dragEnd();\n    };\n\n    const onSurfaceMouseDown = selectMode === \"none\"\n        ? undefined\n        : selectMode === \"select\"\n            ? dragStart\n            : disableZoom ? undefined : zoom.dragStart;\n    const onSurfaceMouseUp = selectMode === \"none\"\n        ? undefined\n        : selectMode === \"select\"\n            ? handleSelectionEnd\n            : disableZoom ? undefined : onZoomDragEnd;\n    const onSurfaceMouseMove = selectMode === \"none\"\n        ? undefined\n        : selectMode === \"select\"\n            ? (isDragging ? dragMove : undefined)\n            : disableZoom ? undefined : onZoomDragMove;\n    const onSurfaceMouseLeave = selectMode === \"none\"\n        ? undefined\n        : selectMode === \"select\"\n            ? handleSelectionEnd\n            : disableZoom ? undefined : onZoomDragEnd;\n    const onSurfaceTouchStart = selectMode === \"none\"\n        ? undefined\n        : selectMode === \"select\"\n            ? dragStart\n            : disableZoom ? undefined : zoom.dragStart;\n    const onSurfaceTouchEnd = selectMode === \"none\"\n        ? undefined\n        : selectMode === \"select\"\n            ? handleSelectionEnd\n            : disableZoom ? undefined : onZoomDragEnd;\n    const onSurfaceTouchMove = selectMode === \"none\"\n        ? undefined\n        : selectMode === \"select\"\n            ? (isDragging ? dragMove : undefined)\n            : disableZoom ? undefined : onZoomDragMove;\n    const onSurfaceWheel: React.WheelEventHandler<SVGRectElement> = (event) => {\n        setShowPointAnimation(false);\n        if (!disableZoom) {\n            const point = localPoint(event) || { x: 0, y: 0 };\n            const zoomDirection = event.deltaY < 0 ? 1.1 : 0.9;\n            zoom.scale({ scaleX: zoomDirection, scaleY: zoomDirection, point });\n        }\n    };\n\n    const previousDisplayedPoints = useRef<Point<T>[]>([]);\n\n    useEffect(() => {\n        const haveDisplayedPointsChanged = (prevPoints: Point<T>[], nextPoints: Point<T>[]) => {\n            if (prevPoints.length !== nextPoints.length) return true;\n            return !prevPoints.every((point, index) => {\n                const nextPoint = nextPoints[index];\n                return (\n                    point.x === nextPoint.x &&\n                    point.y === nextPoint.y &&\n                    point.r === nextPoint.r &&\n                    point.shape === nextPoint.shape &&\n                    point.color === nextPoint.color &&\n                    point.opacity === nextPoint.opacity\n                );\n            });\n        };\n\n        if (haveDisplayedPointsChanged(previousDisplayedPoints.current, currentDisplayedPoints)) {\n            onDisplayedPointsChange?.(currentDisplayedPoints);\n            previousDisplayedPoints.current = currentDisplayedPoints;\n        }\n    }, [currentDisplayedPoints, onDisplayedPointsChange]);\n\n    return (\n        <Stack justifyContent=\"center\" alignItems=\"center\" direction=\"row\" sx={{ position: \"relative\" }}>\n            <Box sx={{ width, height }}>\n                {loading ? (\n                    <Box display=\"flex\" width=\"100%\" height=\"100%\" sx={{ justifyContent: \"center\", alignItems: \"center\" }}>\n                        <CircularProgress />\n                    </Box>\n                ) : (\n                    <div style={{ position: \"relative\" }} ref={divRef}>\n                        <canvas\n                            ref={canvasRef}\n                            width={boundedWidth * 2}\n                            height={boundedHeight * 2}\n                            style={{\n                                userSelect: \"none\",\n                                position: \"absolute\",\n                                top: margin.top,\n                                left: margin.left,\n                                width: boundedWidth,\n                                height: boundedHeight,\n                                backgroundColor: \"transparent\",\n                            }}\n                        />\n                        <svg\n                            width={width}\n                            height={height}\n                            overflow=\"visible\"\n                            style={{ position: \"absolute\", userSelect: \"none\" }}\n                            onMouseMove={(event) => {\n                                if (isDragging) handleMouseLeave();\n                                else handleMouseMove(event, zoom);\n                            }}\n                            onMouseLeave={handleMouseLeave}\n                        >\n                            <Group top={margin.top} left={margin.left}>\n                                {showPointAnimation && animation && (\n                                    <AnimatedPoints\n                                        pointData={pointData}\n                                        animation={animation}\n                                        animationGroupSize={animationGroupSize}\n                                        animationBuffer={animationBuffer}\n                                        xScaleTransformed={xScaleTransformed}\n                                        yScaleTransformed={yScaleTransformed}\n                                        boundedWidth={boundedWidth}\n                                        boundedHeight={boundedHeight}\n                                    />\n                                )}\n                                {selectMode === \"select\" && (\n                                    <>\n                                        {lines.map((line, index) => (\n                                            <LinePath\n                                                key={`line-${index}`}\n                                                fill=\"transparent\"\n                                                stroke=\"black\"\n                                                strokeWidth={3}\n                                                data={line}\n                                                curve={curveBasis}\n                                                x={(datum) => datum.x}\n                                                y={(datum) => datum.y}\n                                            />\n                                        ))}\n                                        {isDragging && (\n                                            <g>\n                                                <line x1={x - margin.left + dx - 6} y1={y - margin.top + dy} x2={x - margin.left + dx + 6} y2={y - margin.top + dy} stroke=\"black\" strokeWidth={1} />\n                                                <line x1={x - margin.left + dx} y1={y - margin.top + dy - 6} x2={x - margin.left + dx} y2={y - margin.top + dy + 6} stroke=\"black\" strokeWidth={1} />\n                                                <circle cx={x - margin.left} cy={y - margin.top} r={4} fill=\"transparent\" stroke=\"black\" pointerEvents=\"none\" />\n                                            </g>\n                                        )}\n                                    </>\n                                )}\n                                {originLine && (() => {\n                                    const x0 = xScaleTransformed(0);\n                                    const y0 = yScaleTransformed(0);\n                                    return (\n                                        <>\n                                            {y0 >= 0 && y0 <= boundedHeight && (\n                                                <line x1={0} x2={boundedWidth} y1={y0} y2={y0} stroke=\"#000\" strokeWidth={1} strokeDasharray=\"4,4\" pointerEvents=\"none\" />\n                                            )}\n                                            {x0 >= 0 && x0 <= boundedWidth && (\n                                                <line x1={x0} x2={x0} y1={0} y2={boundedHeight} stroke=\"#000\" strokeWidth={1} strokeDasharray=\"4,4\" pointerEvents=\"none\" />\n                                            )}\n                                        </>\n                                    );\n                                })()}\n                                <rect\n                                    ref={graphRef}\n                                    fill=\"transparent\"\n                                    width={boundedWidth}\n                                    height={boundedHeight}\n                                    style={{ cursor: surfaceCursor }}\n                                    onMouseDown={onSurfaceMouseDown}\n                                    onMouseUp={onSurfaceMouseUp}\n                                    onMouseMove={onSurfaceMouseMove}\n                                    onMouseLeave={onSurfaceMouseLeave}\n                                    onTouchStart={onSurfaceTouchStart}\n                                    onTouchEnd={onSurfaceTouchEnd}\n                                    onTouchMove={onSurfaceTouchMove}\n                                    onWheel={onSurfaceWheel}\n                                    onClick={handlePointClick}\n                                />\n                                {crosshair && !isDragging && (\n                                    <Crosshair\n                                        position={{\n                                            x: xScaleTransformed(crosshair.x),\n                                            y: yScaleTransformed(crosshair.y),\n                                        }}\n                                        boundedWidth={boundedWidth}\n                                        boundedHeight={boundedHeight}\n                                    />\n                                )}\n                            </Group>\n                            <Group top={margin.top} left={margin.left}>\n                                <AxisLeft\n                                    scale={yScaleTransformed}\n                                    tickLabelProps={() => ({\n                                        fill: \"#1c1917\",\n                                        fontSize: 10,\n                                        textAnchor: \"end\",\n                                        verticalAnchor: \"middle\",\n                                        x: -10,\n                                    })}\n                                    tickValues={getTicks(yScaleTransformed, 5)}\n                                />\n                                <AxisBottom\n                                    top={boundedHeight}\n                                    scale={xScaleTransformed}\n                                    tickLabelProps={() => ({\n                                        fill: \"#1c1917\",\n                                        fontSize: 11,\n                                        textAnchor: \"middle\",\n                                    })}\n                                    tickValues={getTicks(xScaleTransformed, 5)}\n                                />\n                                {border && (\n                                    <>\n                                        <AxisTop top={0} scale={xScaleTransformed} tickValues={[]} />\n                                        <AxisRight scale={yScaleTransformed} tickValues={[]} left={boundedWidth} />\n                                    </>\n                                )}\n                                <Text textAnchor=\"middle\" verticalAnchor=\"end\" angle={-90} fontSize={15} y={boundedHeight / 2} x={0} dx={-50}>\n                                    {leftAxisLabel}\n                                </Text>\n                                <Text textAnchor=\"middle\" verticalAnchor=\"start\" fontSize={15} y={boundedHeight} x={boundedWidth / 2} dy={50}>\n                                    {bottomAxisLabel}\n                                </Text>\n                            </Group>\n                            <PointLabels\n                                pointData={pointData}\n                                xScaleTransformed={xScaleTransformed}\n                                yScaleTransformed={yScaleTransformed}\n                                boundedWidth={boundedWidth}\n                                boundedHeight={boundedHeight}\n                                margin={margin}\n                            />\n                            {backgroundGradient?.legend && (\n                                <GradientLegend\n                                    backgroundGradient={backgroundGradient}\n                                    boundedHeight={boundedHeight}\n                                    barLeft={margin.left + boundedWidth + 25}\n                                    marginTop={margin.top}\n                                />\n                            )}\n                        </svg>\n                    </div>\n                )}\n            </Box>\n        </Stack>\n    );\n};\n\nexport default ScatterPlotViewport;\n"],"names":["HOVER_GROW_MS","easeOutCubic","t","Math","pow","ScatterPlotViewport","width","height","margin","boundedWidth","boundedHeight","loading","pointData","animation","animationGroupSize","animationBuffer","xScale","yScale","zoom","selectMode","selectable","disableZoom","groupPointsAnchor","hoveredPoint","hoveredPoints","hoverGrowth","hoverStroke","handleMouseMove","handleMouseLeave","onDisplayedPointsChange","onSelectionChange","onPointClicked","leftAxisLabel","bottomAxisLabel","border","originLine","backgroundGradient","crosshair","divRef","graphRef","useRef","canvasRef","hoverAmountRef","animatedKeysRef","hoverStartedAtRef","showPointAnimation","setShowPointAnimation","useState","Boolean","useEffect","length","duration","buffer","groups","ceil","total","window","setTimeout","clearTimeout","lines","isDragging","x","y","dx","dy","dragStart","dragMove","dragEnd","completeSelection","useDragSelection","graphElement","current","handleWheel","event","preventDefault","handleTouchMove","handleTouchStart","addEventListener","passive","removeEventListener","xScaleTransformed","useMemo","rescaleX","transformMatrix","translateX","scaleX","yScaleTransformed","rescaleY","translateY","scaleY","highlightSeeds","groupedPoints","anchor","anchorValue","point","metaData","seedValues","Set","map","filter","value","undefined","size","has","previousHoveredKeysRef","hoveredPointKeys","next","previous","every","key","currentDisplayedPoints","tx","ty","hoverStyle","growth","DEFAULT_HOVER_STYLE","stroke","drawPoints","useCallback","xST","yST","canvas","context","getContext","prepareCanvas","colorLow","colorMid","colorHigh","colorScale","W","H","x0","y0","fraction","max","min","gradient","createLinearGradient","addColorStop","globalAlpha","opacity","fillStyle","fillRect","nonHovered","hovered","partitionPointsByHover","drawRenderedPoint","isHovered","transformedX","transformedY","isPointVisible","drawCanvasPoint","forEach","sameHover","performance","now","startedAt","frame","requestAnimationFrame","step","cancelAnimationFrame","handlePointClick","surfaceCursor","handleSelectionEnd","dragFrameRef","pendingDragRef","dragMoveLatest","useStableCallback","flushPendingDrag","pending","onZoomDragMove","nativeEvent","onZoomDragEnd","onSurfaceMouseDown","onSurfaceMouseUp","onSurfaceMouseMove","onSurfaceMouseLeave","onSurfaceTouchStart","onSurfaceTouchEnd","onSurfaceTouchMove","onSurfaceWheel","localPoint","zoomDirection","deltaY","scale","previousDisplayedPoints","haveDisplayedPointsChanged","prevPoints","nextPoints","index","nextPoint","r","shape","color","jsx","Stack","position","Box","justifyContent","alignItems","CircularProgress","jsxs","userSelect","top","left","backgroundColor","Group","AnimatedPoints","Fragment","line","LinePath","curveBasis","datum","cursor","Crosshair","AxisLeft","fill","fontSize","textAnchor","verticalAnchor","getTicks","AxisBottom","AxisTop","AxisRight","Text","PointLabels","legend","GradientLegend"],"mappings":"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"}
+{"version":3,"file":"visualization.es43.js","sources":["../../../node_modules/.pnpm/use-react-screenshot@4.0.0_html2canvas@1.4.1_react@19.2.4/node_modules/use-react-screenshot/dist/index.es.js"],"sourcesContent":["import { useState } from 'react';\nimport html2canvas from 'html2canvas';\n\nfunction _slicedToArray(arr, i) {\n  return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest();\n}\n\nfunction _arrayWithHoles(arr) {\n  if (Array.isArray(arr)) return arr;\n}\n\nfunction _iterableToArrayLimit(arr, i) {\n  if (typeof Symbol === \"undefined\" || !(Symbol.iterator in Object(arr))) return;\n  var _arr = [];\n  var _n = true;\n  var _d = false;\n  var _e = undefined;\n\n  try {\n    for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) {\n      _arr.push(_s.value);\n\n      if (i && _arr.length === i) break;\n    }\n  } catch (err) {\n    _d = true;\n    _e = err;\n  } finally {\n    try {\n      if (!_n && _i[\"return\"] != null) _i[\"return\"]();\n    } finally {\n      if (_d) throw _e;\n    }\n  }\n\n  return _arr;\n}\n\nfunction _unsupportedIterableToArray(o, minLen) {\n  if (!o) return;\n  if (typeof o === \"string\") return _arrayLikeToArray(o, minLen);\n  var n = Object.prototype.toString.call(o).slice(8, -1);\n  if (n === \"Object\" && o.constructor) n = o.constructor.name;\n  if (n === \"Map\" || n === \"Set\") return Array.from(n);\n  if (n === \"Arguments\" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);\n}\n\nfunction _arrayLikeToArray(arr, len) {\n  if (len == null || len > arr.length) len = arr.length;\n\n  for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i];\n\n  return arr2;\n}\n\nfunction _nonIterableRest() {\n  throw new TypeError(\"Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.\");\n}\n\n/**\n * @module Main_Hook\n * Hook return\n * @typedef {Array} HookReturn\n * @property {string} HookReturn[0] - image string\n * @property {string} HookReturn[1] - take screen shot string\n * @property {object} HookReturn[2] - errors\n */\n\n/**\n * hook for creating screenshot from html node\n * @returns {HookReturn}\n */\n\nvar useScreenshot = function useScreenshot() {\n  var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},\n      type = _ref.type,\n      quality = _ref.quality;\n\n  var _useState = useState(null),\n      _useState2 = _slicedToArray(_useState, 2),\n      image = _useState2[0],\n      setImage = _useState2[1];\n\n  var _useState3 = useState(null),\n      _useState4 = _slicedToArray(_useState3, 2),\n      error = _useState4[0],\n      setError = _useState4[1];\n  /**\n   * convert html node to image\n   * @param {HTMLElement} node\n   * @param {Options} html2canvas options\n   */\n\n\n  var takeScreenShot = function takeScreenShot(node) {\n    var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};\n\n    if (!node) {\n      throw new Error('You should provide correct html node.');\n    }\n\n    return html2canvas(node, options).then(function (canvas) {\n      var croppedCanvas = document.createElement('canvas');\n      var croppedCanvasContext = croppedCanvas.getContext('2d'); // init data\n\n      var cropPositionTop = 0;\n      var cropPositionLeft = 0;\n      var cropWidth = canvas.width;\n      var cropHeight = canvas.height;\n      croppedCanvas.width = cropWidth;\n      croppedCanvas.height = cropHeight;\n      croppedCanvasContext.drawImage(canvas, cropPositionLeft, cropPositionTop);\n      var base64Image = croppedCanvas.toDataURL(type, quality);\n      setImage(base64Image);\n      return base64Image;\n    })[\"catch\"](setError);\n  };\n\n  return [image, takeScreenShot, {\n    error: error\n  }];\n};\n/**\n * creates name of file\n * @param {string} extension\n * @param  {string[]} parts of file name\n */\n\n\nvar createFileName = function createFileName() {\n  var extension = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';\n\n  if (!extension) {\n    return '';\n  }\n\n  for (var _len = arguments.length, names = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {\n    names[_key - 1] = arguments[_key];\n  }\n\n  return \"\".concat(names.join(''), \".\").concat(extension);\n};\n\nexport { createFileName, useScreenshot };\n//# sourceMappingURL=index.es.js.map\n"],"names":["_slicedToArray","arr","i","_arrayWithHoles","_iterableToArrayLimit","_unsupportedIterableToArray","_nonIterableRest","_arr","_n","_d","_e","_i","_s","err","o","minLen","_arrayLikeToArray","n","len","arr2","useScreenshot","_ref","type","quality","_useState","useState","_useState2","image","setImage","_useState3","_useState4","error","setError","takeScreenShot","node","options","html2canvas","canvas","croppedCanvas","croppedCanvasContext","cropPositionTop","cropPositionLeft","cropWidth","cropHeight","base64Image"],"mappings":"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","x_google_ignoreList":[0]}

package/dist/visualization.es430.js

@@ -1,9 +1,10 @@
-import { number as r } from "./visualization.es419.js";
-const t = {
-  ...r,
-  transform: Math.round
-};
+import { supportsFlags as t } from "./visualization.es429.js";
+import { memo as p } from "./visualization.es394.js";
+function i(o, m) {
+  const r = p(o);
+  return () => t[m] ?? r();
+}
 export {
-  t as int
+  i as memoSupports
 };
 //# sourceMappingURL=visualization.es430.js.map

package/dist/visualization.es430.js.map

@@ -1 +1 @@
-{"version":3,"file":"visualization.es430.js","sources":["../../../node_modules/.pnpm/motion-dom@12.38.0/node_modules/motion-dom/dist/es/value/types/int.mjs"],"sourcesContent":["import { number } from './numbers/index.mjs';\n\nconst int = {\n    ...number,\n    transform: Math.round,\n};\n\nexport { int };\n//# sourceMappingURL=int.mjs.map\n"],"names":["int","number"],"mappings":";AAEK,MAACA,IAAM;AAAA,EACR,GAAGC;AAAA,EACH,WAAW,KAAK;AACpB;","x_google_ignoreList":[0]}
+{"version":3,"file":"visualization.es430.js","sources":["../../../node_modules/.pnpm/motion-dom@12.38.0/node_modules/motion-dom/dist/es/utils/supports/memo.mjs"],"sourcesContent":["import { memo } from 'motion-utils';\nimport { supportsFlags } from './flags.mjs';\n\nfunction memoSupports(callback, supportsFlag) {\n    const memoized = memo(callback);\n    return () => supportsFlags[supportsFlag] ?? memoized();\n}\n\nexport { memoSupports };\n//# sourceMappingURL=memo.mjs.map\n"],"names":["memoSupports","callback","supportsFlag","memoized","memo","supportsFlags"],"mappings":";;AAGA,SAASA,EAAaC,GAAUC,GAAc;AAC1C,QAAMC,IAAWC,EAAKH,CAAQ;AAC9B,SAAO,MAAMI,EAAcH,CAAY,KAAKC,EAAQ;AACxD;","x_google_ignoreList":[0]}

package/dist/visualization.es431.js

@@ -1,32 +1,213 @@
-import { alpha as s, scale as t } from "./visualization.es419.js";
-import { px as e, progressPercentage as a, degrees as r } from "./visualization.es420.js";
-const n = {
-  rotate: r,
-  rotateX: r,
-  rotateY: r,
-  rotateZ: r,
-  scale: t,
-  scaleX: t,
-  scaleY: t,
-  scaleZ: t,
-  skew: r,
-  skewX: r,
-  skewY: r,
-  distance: e,
-  translateX: e,
-  translateY: e,
-  translateZ: e,
-  x: e,
-  y: e,
-  z: e,
-  perspective: e,
-  transformPerspective: e,
-  opacity: s,
-  originX: a,
-  originY: a,
-  originZ: e
-};
+import { time as n } from "./visualization.es321.js";
+import { frame as o } from "./visualization.es359.js";
+import { warnOnce as d } from "./visualization.es306.js";
+import { SubscriptionManager as c } from "./visualization.es432.js";
+import { velocityPerSecond as p } from "./visualization.es433.js";
+const r = 30, u = (s) => !isNaN(parseFloat(s));
+class f {
+  /**
+   * @param init - The initiating value
+   * @param config - Optional configuration options
+   *
+   * -  `transformer`: A function to transform incoming values with.
+   */
+  constructor(t, e = {}) {
+    this.canTrackVelocity = null, this.events = {}, this.updateAndNotify = (i) => {
+      const a = n.now();
+      if (this.updatedAt !== a && this.setPrevFrameValue(), this.prev = this.current, this.setCurrent(i), this.current !== this.prev && (this.events.change?.notify(this.current), this.dependents))
+        for (const h of this.dependents)
+          h.dirty();
+    }, this.hasAnimated = !1, this.setCurrent(t), this.owner = e.owner;
+  }
+  setCurrent(t) {
+    this.current = t, this.updatedAt = n.now(), this.canTrackVelocity === null && t !== void 0 && (this.canTrackVelocity = u(this.current));
+  }
+  setPrevFrameValue(t = this.current) {
+    this.prevFrameValue = t, this.prevUpdatedAt = this.updatedAt;
+  }
+  /**
+   * Adds a function that will be notified when the `MotionValue` is updated.
+   *
+   * It returns a function that, when called, will cancel the subscription.
+   *
+   * When calling `onChange` inside a React component, it should be wrapped with the
+   * `useEffect` hook. As it returns an unsubscribe function, this should be returned
+   * from the `useEffect` function to ensure you don't add duplicate subscribers..
+   *
+   * ```jsx
+   * export const MyComponent = () => {
+   *   const x = useMotionValue(0)
+   *   const y = useMotionValue(0)
+   *   const opacity = useMotionValue(1)
+   *
+   *   useEffect(() => {
+   *     function updateOpacity() {
+   *       const maxXY = Math.max(x.get(), y.get())
+   *       const newOpacity = transform(maxXY, [0, 100], [1, 0])
+   *       opacity.set(newOpacity)
+   *     }
+   *
+   *     const unsubscribeX = x.on("change", updateOpacity)
+   *     const unsubscribeY = y.on("change", updateOpacity)
+   *
+   *     return () => {
+   *       unsubscribeX()
+   *       unsubscribeY()
+   *     }
+   *   }, [])
+   *
+   *   return <motion.div style={{ x }} />
+   * }
+   * ```
+   *
+   * @param subscriber - A function that receives the latest value.
+   * @returns A function that, when called, will cancel this subscription.
+   *
+   * @deprecated
+   */
+  onChange(t) {
+    return process.env.NODE_ENV !== "production" && d(!1, 'value.onChange(callback) is deprecated. Switch to value.on("change", callback).'), this.on("change", t);
+  }
+  on(t, e) {
+    this.events[t] || (this.events[t] = new c());
+    const i = this.events[t].add(e);
+    return t === "change" ? () => {
+      i(), o.read(() => {
+        this.events.change.getSize() || this.stop();
+      });
+    } : i;
+  }
+  clearListeners() {
+    for (const t in this.events)
+      this.events[t].clear();
+  }
+  /**
+   * Attaches a passive effect to the `MotionValue`.
+   */
+  attach(t, e) {
+    this.passiveEffect = t, this.stopPassiveEffect = e;
+  }
+  /**
+   * Sets the state of the `MotionValue`.
+   *
+   * @remarks
+   *
+   * ```jsx
+   * const x = useMotionValue(0)
+   * x.set(10)
+   * ```
+   *
+   * @param latest - Latest value to set.
+   * @param render - Whether to notify render subscribers. Defaults to `true`
+   *
+   * @public
+   */
+  set(t) {
+    this.passiveEffect ? this.passiveEffect(t, this.updateAndNotify) : this.updateAndNotify(t);
+  }
+  setWithVelocity(t, e, i) {
+    this.set(e), this.prev = void 0, this.prevFrameValue = t, this.prevUpdatedAt = this.updatedAt - i;
+  }
+  /**
+   * Set the state of the `MotionValue`, stopping any active animations,
+   * effects, and resets velocity to `0`.
+   */
+  jump(t, e = !0) {
+    this.updateAndNotify(t), this.prev = t, this.prevUpdatedAt = this.prevFrameValue = void 0, e && this.stop(), this.stopPassiveEffect && this.stopPassiveEffect();
+  }
+  dirty() {
+    this.events.change?.notify(this.current);
+  }
+  addDependent(t) {
+    this.dependents || (this.dependents = /* @__PURE__ */ new Set()), this.dependents.add(t);
+  }
+  removeDependent(t) {
+    this.dependents && this.dependents.delete(t);
+  }
+  /**
+   * Returns the latest state of `MotionValue`
+   *
+   * @returns - The latest state of `MotionValue`
+   *
+   * @public
+   */
+  get() {
+    return this.current;
+  }
+  /**
+   * @public
+   */
+  getPrevious() {
+    return this.prev;
+  }
+  /**
+   * Returns the latest velocity of `MotionValue`
+   *
+   * @returns - The latest velocity of `MotionValue`. Returns `0` if the state is non-numerical.
+   *
+   * @public
+   */
+  getVelocity() {
+    const t = n.now();
+    if (!this.canTrackVelocity || this.prevFrameValue === void 0 || t - this.updatedAt > r)
+      return 0;
+    const e = Math.min(this.updatedAt - this.prevUpdatedAt, r);
+    return p(parseFloat(this.current) - parseFloat(this.prevFrameValue), e);
+  }
+  /**
+   * Registers a new animation to control this `MotionValue`. Only one
+   * animation can drive a `MotionValue` at one time.
+   *
+   * ```jsx
+   * value.start()
+   * ```
+   *
+   * @param animation - A function that starts the provided animation
+   */
+  start(t) {
+    return this.stop(), new Promise((e) => {
+      this.hasAnimated = !0, this.animation = t(e), this.events.animationStart && this.events.animationStart.notify();
+    }).then(() => {
+      this.events.animationComplete && this.events.animationComplete.notify(), this.clearAnimation();
+    });
+  }
+  /**
+   * Stop the currently active animation.
+   *
+   * @public
+   */
+  stop() {
+    this.animation && (this.animation.stop(), this.events.animationCancel && this.events.animationCancel.notify()), this.clearAnimation();
+  }
+  /**
+   * Returns `true` if this value is currently animating.
+   *
+   * @public
+   */
+  isAnimating() {
+    return !!this.animation;
+  }
+  clearAnimation() {
+    delete this.animation;
+  }
+  /**
+   * Destroy and clean up subscribers to this `MotionValue`.
+   *
+   * The `MotionValue` hooks like `useMotionValue` and `useTransform` automatically
+   * handle the lifecycle of the returned `MotionValue`, so this method is only necessary if you've manually
+   * created a `MotionValue` via the `motionValue` function.
+   *
+   * @public
+   */
+  destroy() {
+    this.dependents?.clear(), this.events.destroy?.notify(), this.clearListeners(), this.stop(), this.stopPassiveEffect && this.stopPassiveEffect();
+  }
+}
+function V(s, t) {
+  return new f(s, t);
+}
 export {
-  n as transformValueTypes
+  f as MotionValue,
+  V as motionValue
 };
 //# sourceMappingURL=visualization.es431.js.map

package/dist/visualization.es431.js.map

@@ -1 +1 @@
-{"version":3,"file":"visualization.es431.js","sources":["../../../node_modules/.pnpm/motion-dom@12.38.0/node_modules/motion-dom/dist/es/value/types/maps/transform.mjs"],"sourcesContent":["import { alpha, scale } from '../numbers/index.mjs';\nimport { px, progressPercentage, degrees } from '../numbers/units.mjs';\n\nconst transformValueTypes = {\n    rotate: degrees,\n    rotateX: degrees,\n    rotateY: degrees,\n    rotateZ: degrees,\n    scale,\n    scaleX: scale,\n    scaleY: scale,\n    scaleZ: scale,\n    skew: degrees,\n    skewX: degrees,\n    skewY: degrees,\n    distance: px,\n    translateX: px,\n    translateY: px,\n    translateZ: px,\n    x: px,\n    y: px,\n    z: px,\n    perspective: px,\n    transformPerspective: px,\n    opacity: alpha,\n    originX: progressPercentage,\n    originY: progressPercentage,\n    originZ: px,\n};\n\nexport { transformValueTypes };\n//# sourceMappingURL=transform.mjs.map\n"],"names":["transformValueTypes","degrees","scale","px","alpha","progressPercentage"],"mappings":";;AAGK,MAACA,IAAsB;AAAA,EACxB,QAAQC;AAAA,EACR,SAASA;AAAA,EACT,SAASA;AAAA,EACT,SAASA;AAAA,EACT,OAAAC;AAAA,EACA,QAAQA;AAAA,EACR,QAAQA;AAAA,EACR,QAAQA;AAAA,EACR,MAAMD;AAAA,EACN,OAAOA;AAAA,EACP,OAAOA;AAAA,EACP,UAAUE;AAAA,EACV,YAAYA;AAAA,EACZ,YAAYA;AAAA,EACZ,YAAYA;AAAA,EACZ,GAAGA;AAAA,EACH,GAAGA;AAAA,EACH,GAAGA;AAAA,EACH,aAAaA;AAAA,EACb,sBAAsBA;AAAA,EACtB,SAASC;AAAA,EACT,SAASC;AAAA,EACT,SAASA;AAAA,EACT,SAASF;AACb;","x_google_ignoreList":[0]}
+{"version":3,"file":"visualization.es431.js","sources":["../../../node_modules/.pnpm/motion-dom@12.38.0/node_modules/motion-dom/dist/es/value/index.mjs"],"sourcesContent":["import { warnOnce, SubscriptionManager, velocityPerSecond } from 'motion-utils';\nimport { time } from '../frameloop/sync-time.mjs';\nimport { frame } from '../frameloop/frame.mjs';\n\n/**\n * Maximum time between the value of two frames, beyond which we\n * assume the velocity has since been 0.\n */\nconst MAX_VELOCITY_DELTA = 30;\nconst isFloat = (value) => {\n    return !isNaN(parseFloat(value));\n};\nconst collectMotionValues = {\n    current: undefined,\n};\n/**\n * `MotionValue` is used to track the state and velocity of motion values.\n *\n * @public\n */\nclass MotionValue {\n    /**\n     * @param init - The initiating value\n     * @param config - Optional configuration options\n     *\n     * -  `transformer`: A function to transform incoming values with.\n     */\n    constructor(init, options = {}) {\n        /**\n         * Tracks whether this value can output a velocity. Currently this is only true\n         * if the value is numerical, but we might be able to widen the scope here and support\n         * other value types.\n         *\n         * @internal\n         */\n        this.canTrackVelocity = null;\n        /**\n         * An object containing a SubscriptionManager for each active event.\n         */\n        this.events = {};\n        this.updateAndNotify = (v) => {\n            const currentTime = time.now();\n            /**\n             * If we're updating the value during another frame or eventloop\n             * than the previous frame, then the we set the previous frame value\n             * to current.\n             */\n            if (this.updatedAt !== currentTime) {\n                this.setPrevFrameValue();\n            }\n            this.prev = this.current;\n            this.setCurrent(v);\n            // Update update subscribers\n            if (this.current !== this.prev) {\n                this.events.change?.notify(this.current);\n                if (this.dependents) {\n                    for (const dependent of this.dependents) {\n                        dependent.dirty();\n                    }\n                }\n            }\n        };\n        this.hasAnimated = false;\n        this.setCurrent(init);\n        this.owner = options.owner;\n    }\n    setCurrent(current) {\n        this.current = current;\n        this.updatedAt = time.now();\n        if (this.canTrackVelocity === null && current !== undefined) {\n            this.canTrackVelocity = isFloat(this.current);\n        }\n    }\n    setPrevFrameValue(prevFrameValue = this.current) {\n        this.prevFrameValue = prevFrameValue;\n        this.prevUpdatedAt = this.updatedAt;\n    }\n    /**\n     * Adds a function that will be notified when the `MotionValue` is updated.\n     *\n     * It returns a function that, when called, will cancel the subscription.\n     *\n     * When calling `onChange` inside a React component, it should be wrapped with the\n     * `useEffect` hook. As it returns an unsubscribe function, this should be returned\n     * from the `useEffect` function to ensure you don't add duplicate subscribers..\n     *\n     * ```jsx\n     * export const MyComponent = () => {\n     *   const x = useMotionValue(0)\n     *   const y = useMotionValue(0)\n     *   const opacity = useMotionValue(1)\n     *\n     *   useEffect(() => {\n     *     function updateOpacity() {\n     *       const maxXY = Math.max(x.get(), y.get())\n     *       const newOpacity = transform(maxXY, [0, 100], [1, 0])\n     *       opacity.set(newOpacity)\n     *     }\n     *\n     *     const unsubscribeX = x.on(\"change\", updateOpacity)\n     *     const unsubscribeY = y.on(\"change\", updateOpacity)\n     *\n     *     return () => {\n     *       unsubscribeX()\n     *       unsubscribeY()\n     *     }\n     *   }, [])\n     *\n     *   return <motion.div style={{ x }} />\n     * }\n     * ```\n     *\n     * @param subscriber - A function that receives the latest value.\n     * @returns A function that, when called, will cancel this subscription.\n     *\n     * @deprecated\n     */\n    onChange(subscription) {\n        if (process.env.NODE_ENV !== \"production\") {\n            warnOnce(false, `value.onChange(callback) is deprecated. Switch to value.on(\"change\", callback).`);\n        }\n        return this.on(\"change\", subscription);\n    }\n    on(eventName, callback) {\n        if (!this.events[eventName]) {\n            this.events[eventName] = new SubscriptionManager();\n        }\n        const unsubscribe = this.events[eventName].add(callback);\n        if (eventName === \"change\") {\n            return () => {\n                unsubscribe();\n                /**\n                 * If we have no more change listeners by the start\n                 * of the next frame, stop active animations.\n                 */\n                frame.read(() => {\n                    if (!this.events.change.getSize()) {\n                        this.stop();\n                    }\n                });\n            };\n        }\n        return unsubscribe;\n    }\n    clearListeners() {\n        for (const eventManagers in this.events) {\n            this.events[eventManagers].clear();\n        }\n    }\n    /**\n     * Attaches a passive effect to the `MotionValue`.\n     */\n    attach(passiveEffect, stopPassiveEffect) {\n        this.passiveEffect = passiveEffect;\n        this.stopPassiveEffect = stopPassiveEffect;\n    }\n    /**\n     * Sets the state of the `MotionValue`.\n     *\n     * @remarks\n     *\n     * ```jsx\n     * const x = useMotionValue(0)\n     * x.set(10)\n     * ```\n     *\n     * @param latest - Latest value to set.\n     * @param render - Whether to notify render subscribers. Defaults to `true`\n     *\n     * @public\n     */\n    set(v) {\n        if (!this.passiveEffect) {\n            this.updateAndNotify(v);\n        }\n        else {\n            this.passiveEffect(v, this.updateAndNotify);\n        }\n    }\n    setWithVelocity(prev, current, delta) {\n        this.set(current);\n        this.prev = undefined;\n        this.prevFrameValue = prev;\n        this.prevUpdatedAt = this.updatedAt - delta;\n    }\n    /**\n     * Set the state of the `MotionValue`, stopping any active animations,\n     * effects, and resets velocity to `0`.\n     */\n    jump(v, endAnimation = true) {\n        this.updateAndNotify(v);\n        this.prev = v;\n        this.prevUpdatedAt = this.prevFrameValue = undefined;\n        endAnimation && this.stop();\n        if (this.stopPassiveEffect)\n            this.stopPassiveEffect();\n    }\n    dirty() {\n        this.events.change?.notify(this.current);\n    }\n    addDependent(dependent) {\n        if (!this.dependents) {\n            this.dependents = new Set();\n        }\n        this.dependents.add(dependent);\n    }\n    removeDependent(dependent) {\n        if (this.dependents) {\n            this.dependents.delete(dependent);\n        }\n    }\n    /**\n     * Returns the latest state of `MotionValue`\n     *\n     * @returns - The latest state of `MotionValue`\n     *\n     * @public\n     */\n    get() {\n        if (collectMotionValues.current) {\n            collectMotionValues.current.push(this);\n        }\n        return this.current;\n    }\n    /**\n     * @public\n     */\n    getPrevious() {\n        return this.prev;\n    }\n    /**\n     * Returns the latest velocity of `MotionValue`\n     *\n     * @returns - The latest velocity of `MotionValue`. Returns `0` if the state is non-numerical.\n     *\n     * @public\n     */\n    getVelocity() {\n        const currentTime = time.now();\n        if (!this.canTrackVelocity ||\n            this.prevFrameValue === undefined ||\n            currentTime - this.updatedAt > MAX_VELOCITY_DELTA) {\n            return 0;\n        }\n        const delta = Math.min(this.updatedAt - this.prevUpdatedAt, MAX_VELOCITY_DELTA);\n        // Casts because of parseFloat's poor typing\n        return velocityPerSecond(parseFloat(this.current) -\n            parseFloat(this.prevFrameValue), delta);\n    }\n    /**\n     * Registers a new animation to control this `MotionValue`. Only one\n     * animation can drive a `MotionValue` at one time.\n     *\n     * ```jsx\n     * value.start()\n     * ```\n     *\n     * @param animation - A function that starts the provided animation\n     */\n    start(startAnimation) {\n        this.stop();\n        return new Promise((resolve) => {\n            this.hasAnimated = true;\n            this.animation = startAnimation(resolve);\n            if (this.events.animationStart) {\n                this.events.animationStart.notify();\n            }\n        }).then(() => {\n            if (this.events.animationComplete) {\n                this.events.animationComplete.notify();\n            }\n            this.clearAnimation();\n        });\n    }\n    /**\n     * Stop the currently active animation.\n     *\n     * @public\n     */\n    stop() {\n        if (this.animation) {\n            this.animation.stop();\n            if (this.events.animationCancel) {\n                this.events.animationCancel.notify();\n            }\n        }\n        this.clearAnimation();\n    }\n    /**\n     * Returns `true` if this value is currently animating.\n     *\n     * @public\n     */\n    isAnimating() {\n        return !!this.animation;\n    }\n    clearAnimation() {\n        delete this.animation;\n    }\n    /**\n     * Destroy and clean up subscribers to this `MotionValue`.\n     *\n     * The `MotionValue` hooks like `useMotionValue` and `useTransform` automatically\n     * handle the lifecycle of the returned `MotionValue`, so this method is only necessary if you've manually\n     * created a `MotionValue` via the `motionValue` function.\n     *\n     * @public\n     */\n    destroy() {\n        this.dependents?.clear();\n        this.events.destroy?.notify();\n        this.clearListeners();\n        this.stop();\n        if (this.stopPassiveEffect) {\n            this.stopPassiveEffect();\n        }\n    }\n}\nfunction motionValue(init, options) {\n    return new MotionValue(init, options);\n}\n\nexport { MotionValue, collectMotionValues, motionValue };\n//# sourceMappingURL=index.mjs.map\n"],"names":["MAX_VELOCITY_DELTA","isFloat","value","MotionValue","init","options","v","currentTime","time","dependent","current","prevFrameValue","subscription","warnOnce","eventName","callback","SubscriptionManager","unsubscribe","frame","eventManagers","passiveEffect","stopPassiveEffect","prev","delta","endAnimation","velocityPerSecond","startAnimation","resolve","motionValue"],"mappings":"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","x_google_ignoreList":[0]}

package/dist/visualization.es432.js

@@ -1,13 +1,30 @@
-import { complex as m } from "./visualization.es410.js";
-import { filter as n } from "./visualization.es427.js";
-import { mask as a } from "./visualization.es428.js";
-import { getDefaultValueType as r } from "./visualization.es426.js";
-const i = /* @__PURE__ */ new Set([n, a]);
-function s(t, o) {
-  let e = r(t);
-  return i.has(e) || (e = m), e.getAnimatableNone ? e.getAnimatableNone(o) : void 0;
+import { addUniqueItem as e, removeItem as u } from "./visualization.es490.js";
+class h {
+  constructor() {
+    this.subscriptions = [];
+  }
+  add(s) {
+    return e(this.subscriptions, s), () => u(this.subscriptions, s);
+  }
+  notify(s, r, n) {
+    const i = this.subscriptions.length;
+    if (i)
+      if (i === 1)
+        this.subscriptions[0](s, r, n);
+      else
+        for (let t = 0; t < i; t++) {
+          const o = this.subscriptions[t];
+          o && o(s, r, n);
+        }
+  }
+  getSize() {
+    return this.subscriptions.length;
+  }
+  clear() {
+    this.subscriptions.length = 0;
+  }
 }
 export {
-  s as getAnimatableNone
+  h as SubscriptionManager
 };
 //# sourceMappingURL=visualization.es432.js.map

package/dist/visualization.es432.js.map

@@ -1 +1 @@
-{"version":3,"file":"visualization.es432.js","sources":["../../../node_modules/.pnpm/motion-dom@12.38.0/node_modules/motion-dom/dist/es/value/types/utils/animatable-none.mjs"],"sourcesContent":["import { complex } from '../complex/index.mjs';\nimport { filter } from '../complex/filter.mjs';\nimport { mask } from '../complex/mask.mjs';\nimport { getDefaultValueType } from '../maps/defaults.mjs';\n\nconst customTypes = /*@__PURE__*/ new Set([filter, mask]);\nfunction getAnimatableNone(key, value) {\n    let defaultValueType = getDefaultValueType(key);\n    if (!customTypes.has(defaultValueType))\n        defaultValueType = complex;\n    // If value is not recognised as animatable, ie \"none\", create an animatable version origin based on the target\n    return defaultValueType.getAnimatableNone\n        ? defaultValueType.getAnimatableNone(value)\n        : undefined;\n}\n\nexport { getAnimatableNone };\n//# sourceMappingURL=animatable-none.mjs.map\n"],"names":["customTypes","filter","mask","getAnimatableNone","key","value","defaultValueType","getDefaultValueType","complex"],"mappings":";;;;AAKA,MAAMA,IAA4B,oBAAI,IAAI,CAACC,GAAQC,CAAI,CAAC;AACxD,SAASC,EAAkBC,GAAKC,GAAO;AACnC,MAAIC,IAAmBC,EAAoBH,CAAG;AAC9C,SAAKJ,EAAY,IAAIM,CAAgB,MACjCA,IAAmBE,IAEhBF,EAAiB,oBAClBA,EAAiB,kBAAkBD,CAAK,IACxC;AACV;","x_google_ignoreList":[0]}
+{"version":3,"file":"visualization.es432.js","sources":["../../../node_modules/.pnpm/motion-utils@12.36.0/node_modules/motion-utils/dist/es/subscription-manager.mjs"],"sourcesContent":["import { addUniqueItem, removeItem } from './array.mjs';\n\nclass SubscriptionManager {\n    constructor() {\n        this.subscriptions = [];\n    }\n    add(handler) {\n        addUniqueItem(this.subscriptions, handler);\n        return () => removeItem(this.subscriptions, handler);\n    }\n    notify(a, b, c) {\n        const numSubscriptions = this.subscriptions.length;\n        if (!numSubscriptions)\n            return;\n        if (numSubscriptions === 1) {\n            /**\n             * If there's only a single handler we can just call it without invoking a loop.\n             */\n            this.subscriptions[0](a, b, c);\n        }\n        else {\n            for (let i = 0; i < numSubscriptions; i++) {\n                /**\n                 * Check whether the handler exists before firing as it's possible\n                 * the subscriptions were modified during this loop running.\n                 */\n                const handler = this.subscriptions[i];\n                handler && handler(a, b, c);\n            }\n        }\n    }\n    getSize() {\n        return this.subscriptions.length;\n    }\n    clear() {\n        this.subscriptions.length = 0;\n    }\n}\n\nexport { SubscriptionManager };\n//# sourceMappingURL=subscription-manager.mjs.map\n"],"names":["SubscriptionManager","handler","addUniqueItem","removeItem","a","b","c","numSubscriptions","i"],"mappings":";AAEA,MAAMA,EAAoB;AAAA,EACtB,cAAc;AACV,SAAK,gBAAgB,CAAA;AAAA,EACzB;AAAA,EACA,IAAIC,GAAS;AACT,WAAAC,EAAc,KAAK,eAAeD,CAAO,GAClC,MAAME,EAAW,KAAK,eAAeF,CAAO;AAAA,EACvD;AAAA,EACA,OAAOG,GAAGC,GAAGC,GAAG;AACZ,UAAMC,IAAmB,KAAK,cAAc;AAC5C,QAAKA;AAEL,UAAIA,MAAqB;AAIrB,aAAK,cAAc,CAAC,EAAEH,GAAGC,GAAGC,CAAC;AAAA;AAG7B,iBAASE,IAAI,GAAGA,IAAID,GAAkBC,KAAK;AAKvC,gBAAMP,IAAU,KAAK,cAAcO,CAAC;AACpC,UAAAP,KAAWA,EAAQG,GAAGC,GAAGC,CAAC;AAAA,QAC9B;AAAA,EAER;AAAA,EACA,UAAU;AACN,WAAO,KAAK,cAAc;AAAA,EAC9B;AAAA,EACA,QAAQ;AACJ,SAAK,cAAc,SAAS;AAAA,EAChC;AACJ;","x_google_ignoreList":[0]}

package/dist/visualization.es433.js

@@ -1,9 +1,7 @@
-import { color as e } from "./visualization.es409.js";
-import { complex as m } from "./visualization.es410.js";
-import { dimensionValueTypes as p } from "./visualization.es363.js";
-import { testValueType as r } from "./visualization.es425.js";
-const t = [...p, e, m], s = (o) => t.find(r(o));
+function n(c, e) {
+  return e ? c * (1e3 / e) : 0;
+}
 export {
-  s as findValueType
+  n as velocityPerSecond
 };
 //# sourceMappingURL=visualization.es433.js.map

package/dist/visualization.es433.js.map

@@ -1 +1 @@
-{"version":3,"file":"visualization.es433.js","sources":["../../../node_modules/.pnpm/motion-dom@12.38.0/node_modules/motion-dom/dist/es/value/types/utils/find.mjs"],"sourcesContent":["import { color } from '../color/index.mjs';\nimport { complex } from '../complex/index.mjs';\nimport { dimensionValueTypes } from '../dimensions.mjs';\nimport { testValueType } from '../test.mjs';\n\n/**\n * A list of all ValueTypes\n */\nconst valueTypes = [...dimensionValueTypes, color, complex];\n/**\n * Tests a value against the list of ValueTypes\n */\nconst findValueType = (v) => valueTypes.find(testValueType(v));\n\nexport { findValueType };\n//# sourceMappingURL=find.mjs.map\n"],"names":["valueTypes","dimensionValueTypes","color","complex","findValueType","v","testValueType"],"mappings":";;;;AAQA,MAAMA,IAAa,CAAC,GAAGC,GAAqBC,GAAOC,CAAO,GAIpDC,IAAgB,CAACC,MAAML,EAAW,KAAKM,EAAcD,CAAC,CAAC;","x_google_ignoreList":[0]}
+{"version":3,"file":"visualization.es433.js","sources":["../../../node_modules/.pnpm/motion-utils@12.36.0/node_modules/motion-utils/dist/es/velocity-per-second.mjs"],"sourcesContent":["/*\n  Convert velocity into velocity per second\n\n  @param [number]: Unit per frame\n  @param [number]: Frame duration in ms\n*/\nfunction velocityPerSecond(velocity, frameDuration) {\n    return frameDuration ? velocity * (1000 / frameDuration) : 0;\n}\n\nexport { velocityPerSecond };\n//# sourceMappingURL=velocity-per-second.mjs.map\n"],"names":["velocityPerSecond","velocity","frameDuration"],"mappings":"AAMA,SAASA,EAAkBC,GAAUC,GAAe;AAChD,SAAOA,IAAgBD,KAAY,MAAOC,KAAiB;AAC/D;","x_google_ignoreList":[0]}

package/dist/visualization.es434.js

@@ -1,5 +1,19 @@
-const e = (r, t) => t && typeof r == "number" ? t.transform(r) : r;
+import { floatRegex as i } from "./visualization.es439.js";
+import { isNullish as n } from "./visualization.es578.js";
+import { singleColorRegex as f } from "./visualization.es579.js";
+const h = (r, o) => (t) => !!(typeof t == "string" && f.test(t) && t.startsWith(r) || o && !n(t) && Object.prototype.hasOwnProperty.call(t, o)), u = (r, o, t) => (e) => {
+  if (typeof e != "string")
+    return e;
+  const [l, s, p, a] = e.match(i);
+  return {
+    [r]: parseFloat(l),
+    [o]: parseFloat(s),
+    [t]: parseFloat(p),
+    alpha: a !== void 0 ? parseFloat(a) : 1
+  };
+};
 export {
-  e as getValueAsType
+  h as isColorString,
+  u as splitColor
 };
 //# sourceMappingURL=visualization.es434.js.map

package/dist/visualization.es434.js.map

@@ -1 +1 @@
-{"version":3,"file":"visualization.es434.js","sources":["../../../node_modules/.pnpm/motion-dom@12.38.0/node_modules/motion-dom/dist/es/value/types/utils/get-as-type.mjs"],"sourcesContent":["/**\n * Provided a value and a ValueType, returns the value as that value type.\n */\nconst getValueAsType = (value, type) => {\n    return type && typeof value === \"number\"\n        ? type.transform(value)\n        : value;\n};\n\nexport { getValueAsType };\n//# sourceMappingURL=get-as-type.mjs.map\n"],"names":["getValueAsType","value","type"],"mappings":"AAGK,MAACA,IAAiB,CAACC,GAAOC,MACpBA,KAAQ,OAAOD,KAAU,WAC1BC,EAAK,UAAUD,CAAK,IACpBA;","x_google_ignoreList":[0]}
+{"version":3,"file":"visualization.es434.js","sources":["../../../node_modules/.pnpm/motion-dom@12.38.0/node_modules/motion-dom/dist/es/value/types/color/utils.mjs"],"sourcesContent":["import { floatRegex } from '../utils/float-regex.mjs';\nimport { isNullish } from '../utils/is-nullish.mjs';\nimport { singleColorRegex } from '../utils/single-color-regex.mjs';\n\n/**\n * Returns true if the provided string is a color, ie rgba(0,0,0,0) or #000,\n * but false if a number or multiple colors\n */\nconst isColorString = (type, testProp) => (v) => {\n    return Boolean((typeof v === \"string\" &&\n        singleColorRegex.test(v) &&\n        v.startsWith(type)) ||\n        (testProp &&\n            !isNullish(v) &&\n            Object.prototype.hasOwnProperty.call(v, testProp)));\n};\nconst splitColor = (aName, bName, cName) => (v) => {\n    if (typeof v !== \"string\")\n        return v;\n    const [a, b, c, alpha] = v.match(floatRegex);\n    return {\n        [aName]: parseFloat(a),\n        [bName]: parseFloat(b),\n        [cName]: parseFloat(c),\n        alpha: alpha !== undefined ? parseFloat(alpha) : 1,\n    };\n};\n\nexport { isColorString, splitColor };\n//# sourceMappingURL=utils.mjs.map\n"],"names":["isColorString","type","testProp","v","singleColorRegex","isNullish","splitColor","aName","bName","cName","a","b","c","alpha","floatRegex"],"mappings":";;;AAQK,MAACA,IAAgB,CAACC,GAAMC,MAAa,CAACC,MAChC,GAAS,OAAOA,KAAM,YACzBC,EAAiB,KAAKD,CAAC,KACvBA,EAAE,WAAWF,CAAI,KAChBC,KACG,CAACG,EAAUF,CAAC,KACZ,OAAO,UAAU,eAAe,KAAKA,GAAGD,CAAQ,IAEtDI,IAAa,CAACC,GAAOC,GAAOC,MAAU,CAACN,MAAM;AAC/C,MAAI,OAAOA,KAAM;AACb,WAAOA;AACX,QAAM,CAACO,GAAGC,GAAGC,GAAGC,CAAK,IAAIV,EAAE,MAAMW,CAAU;AAC3C,SAAO;AAAA,IACH,CAACP,CAAK,GAAG,WAAWG,CAAC;AAAA,IACrB,CAACF,CAAK,GAAG,WAAWG,CAAC;AAAA,IACrB,CAACF,CAAK,GAAG,WAAWG,CAAC;AAAA,IACrB,OAAOC,MAAU,SAAY,WAAWA,CAAK,IAAI;AAAA,EACzD;AACA;","x_google_ignoreList":[0]}

package/dist/visualization.es435.js

@@ -1,8 +1,18 @@
-import { isMotionValue as i } from "./visualization.es217.js";
-function t(o) {
-  return !!(i(o) && o.add);
-}
+import { clamp as a } from "./visualization.es342.js";
+const r = {
+  test: (t) => typeof t == "number",
+  parse: parseFloat,
+  transform: (t) => t
+}, e = {
+  ...r,
+  transform: (t) => a(0, 1, t)
+}, s = {
+  ...r,
+  default: 1
+};
 export {
-  t as isWillChangeMotionValue
+  e as alpha,
+  r as number,
+  s as scale
 };
 //# sourceMappingURL=visualization.es435.js.map

package/dist/visualization.es435.js.map

@@ -1 +1 @@
-{"version":3,"file":"visualization.es435.js","sources":["../../../node_modules/.pnpm/motion-dom@12.38.0/node_modules/motion-dom/dist/es/value/will-change/is.mjs"],"sourcesContent":["import { isMotionValue } from '../utils/is-motion-value.mjs';\n\nfunction isWillChangeMotionValue(value) {\n    return Boolean(isMotionValue(value) && value.add);\n}\n\nexport { isWillChangeMotionValue };\n//# sourceMappingURL=is.mjs.map\n"],"names":["isWillChangeMotionValue","value","isMotionValue"],"mappings":";AAEA,SAASA,EAAwBC,GAAO;AACpC,SAAO,GAAQC,EAAcD,CAAK,KAAKA,EAAM;AACjD;","x_google_ignoreList":[0]}
+{"version":3,"file":"visualization.es435.js","sources":["../../../node_modules/.pnpm/motion-dom@12.38.0/node_modules/motion-dom/dist/es/value/types/numbers/index.mjs"],"sourcesContent":["import { clamp } from 'motion-utils';\n\nconst number = {\n    test: (v) => typeof v === \"number\",\n    parse: parseFloat,\n    transform: (v) => v,\n};\nconst alpha = {\n    ...number,\n    transform: (v) => clamp(0, 1, v),\n};\nconst scale = {\n    ...number,\n    default: 1,\n};\n\nexport { alpha, number, scale };\n//# sourceMappingURL=index.mjs.map\n"],"names":["number","v","alpha","clamp","scale"],"mappings":";AAEK,MAACA,IAAS;AAAA,EACX,MAAM,CAACC,MAAM,OAAOA,KAAM;AAAA,EAC1B,OAAO;AAAA,EACP,WAAW,CAACA,MAAMA;AACtB,GACMC,IAAQ;AAAA,EACV,GAAGF;AAAA,EACH,WAAW,CAACC,MAAME,EAAM,GAAG,GAAGF,CAAC;AACnC,GACMG,IAAQ;AAAA,EACV,GAAGJ;AAAA,EACH,SAAS;AACb;","x_google_ignoreList":[0]}