50:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 51:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 52:T423,import type { Transition } from "motion/react"; /** Default clip-reveal easing for cartesian charts. */ export const DEFAULT_ANIMATION_EASING = "cubic-bezier(0.85, 0, 0.15, 1)"; export const DEFAULT_ANIMATION_DURATION_MS = 1100; /** Default enter transition — matches the original line chart reveal. */ export const DEFAULT_CHART_ENTER_TRANSITION: Transition = { type: "tween", duration: DEFAULT_ANIMATION_DURATION_MS / 1000, ease: [0.85, 0, 0.15, 1], }; /** * Clip-path width reveal must use tween — spring does not reliably animate SVG width. */ export function clipRevealTransition(enterTransition?: Transition): Transition { if (enterTransition?.type === "tween") { return { ...enterTransition, ease: enterTransition.ease ?? DEFAULT_CHART_ENTER_TRANSITION.ease, }; } const duration = typeof enterTransition?.duration === "number" ? enterTransition.duration : DEFAULT_ANIMATION_DURATION_MS / 1000; return { type: "tween", duration, ease: DEFAULT_CHART_ENTER_TRANSITION.ease, }; } 53:T6a5,import type { Transition } from "motion/react"; import { DEFAULT_CHART_ENTER_TRANSITION } from "./animation"; export function transitionWithDelay( transition: Transition | undefined, delaySeconds: number, fallback: Transition = DEFAULT_CHART_ENTER_TRANSITION ): Transition { const base = transition ?? fallback; return { ...base, delay: delaySeconds }; } export interface SpringOptions { stiffness: number; damping: number; mass?: number; } export function springOptionsFromTransition( transition?: Transition, fallback: SpringOptions = { stiffness: 60, damping: 20 } ): SpringOptions { if (!transition) { return fallback; } if (transition.type === "spring") { const bounce = typeof transition.bounce === "number" ? transition.bounce : undefined; const baseStiffness = typeof transition.stiffness === "number" ? transition.stiffness : fallback.stiffness; const baseDamping = typeof transition.damping === "number" ? transition.damping : fallback.damping; return { stiffness: bounce == null ? baseStiffness : Math.min(400, Math.max(80, baseStiffness * (1 + bounce * 0.35))), damping: bounce == null ? baseDamping : Math.max(8, baseDamping * (1 - bounce * 0.25)), mass: typeof transition.mass === "number" ? transition.mass : fallback.mass, }; } const duration = "duration" in transition && typeof transition.duration === "number" ? transition.duration : 0.8; return { stiffness: Math.min(500, Math.max(40, 280 / duration)), damping: Math.min(40, Math.max(12, 18 + duration * 4)), }; } 54:T9e2,"use client"; import type { Transition } from "motion/react"; import { motion } from "motion/react"; import { clipRevealTransition } from "./animation"; export type ChartRevealClipMode = "reveal" | "conceal"; export interface ChartRevealClipProps { clipPathId: string; height: number; targetWidth: number; enterTransition?: Transition; /** Bumps when motion settings change to replay the reveal. */ revealEpoch: number; /** Extra inset around the clip rect so edge glyphs are not cut off. */ padding?: number; /** When false, clip stays at full width (no grow animation). */ animating?: boolean; /** Reveal grows 0 → full; conceal shrinks full → 0 (ready → loading). */ mode?: ChartRevealClipMode; /** Called when a conceal animation finishes. */ onComplete?: () => void; } /** * Left-to-right clip reveal for cartesian series. * Grows clip rect width from 0 → full (true LTR; scaleX is avoided — it reveals from center). */ export function ChartRevealClip({ clipPathId, height, targetWidth, enterTransition, revealEpoch, padding = 0, animating = true, mode = "reveal", onComplete, }: ChartRevealClipProps) { const transition = clipRevealTransition(enterTransition); const paddedWidth = Math.max(0, targetWidth + padding * 2); const paddedHeight = height + padding * 2; if (!animating) { return ( ); } if (mode === "conceal") { // Mirror the LTR reveal: advance the clip's left edge rightward while width // shrinks (same geometry as `LineLoadingPulseStroke` exit half-cycle). const rightEdge = -padding + paddedWidth; return ( onComplete?.()} transition={transition} y={-padding} /> ); } return ( ); } 55:T7cd,import { Children, isValidElement, type ReactElement, type ReactNode, } from "react"; export function getChartChildComponentName(child: ReactElement): string { const childType = child.type as { displayName?: string; name?: string }; return typeof child.type === "function" ? childType.displayName || childType.name || "" : ""; } const VISX_PATTERN_COMPONENT_NAMES = new Set([ "Lines", "Circles", "Waves", "Hexagons", "Path", "Pattern", ]); /** @visx/pattern default exports use short names (e.g. `Lines`); also match *Pattern* displayNames. */ export function isPatternDefComponent(child: ReactElement): boolean { const name = getChartChildComponentName(child); return name.includes("Pattern") || VISX_PATTERN_COMPONENT_NAMES.has(name); } export function isGradientDefComponent(child: ReactElement): boolean { const name = getChartChildComponentName(child); return ( name.includes("Gradient") || name === "LinearGradient" || name === "RadialGradient" ); } export function isChartDefsComponent(child: ReactElement): boolean { return isPatternDefComponent(child) || isGradientDefComponent(child); } /** Split hoisted defs: @visx/pattern nodes already wrap `` and render at the svg root. */ export function partitionChartDefNodes(defNodes: ReactElement[]): { patternDefNodes: ReactElement[]; gradientDefNodes: ReactElement[]; } { const patternDefNodes: ReactElement[] = []; const gradientDefNodes: ReactElement[] = []; for (const node of defNodes) { if (isPatternDefComponent(node)) { patternDefNodes.push(node); } else { gradientDefNodes.push(node); } } return { patternDefNodes, gradientDefNodes }; } export function collectChartDefsChildren(children: ReactNode): ReactElement[] { const defNodes: ReactElement[] = []; Children.forEach(children, (child) => { if (isValidElement(child) && isChartDefsComponent(child)) { defNodes.push(child); } }); return defNodes; } 4f:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","motion",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/motion","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"motion"}]]}]}]]}],["$","$L50",null,{"namespace":"@bklit","registryDependencies":[]}]]}],null]}],["$","$L51",null,{"files":[{"path":"src/charts/animation.ts","content":"$52","type":"registry:component","target":"components/charts/animation.ts"},{"path":"src/charts/motion-utils.ts","content":"$53","type":"registry:component","target":"components/charts/motion-utils.ts"},{"path":"src/charts/use-mount-progress.ts","content":"\"use client\";\n\nimport { animate, type Transition, useMotionValue } from \"motion/react\";\nimport { useEffect, useRef } from \"react\";\nimport { DEFAULT_CHART_ENTER_TRANSITION } from \"./animation\";\n\n/** Drives 0→1 enter progress using the studio motion transition (spring or tween). */\nexport function useMountProgress(\n enterTransition: Transition | undefined,\n delaySeconds: number,\n replayKey: number | string\n) {\n const progress = useMotionValue(0);\n const transitionRef = useRef(enterTransition);\n transitionRef.current = enterTransition;\n\n // replayKey intentionally retriggers enter when motion settings change\n // biome-ignore lint/correctness/useExhaustiveDependencies: replayKey\n useEffect(() => {\n progress.set(0);\n const controls = animate(progress, 1, {\n ...(transitionRef.current ?? DEFAULT_CHART_ENTER_TRANSITION),\n delay: delaySeconds,\n });\n return () => controls.stop();\n }, [delaySeconds, replayKey, progress]);\n\n return progress;\n}\n","type":"registry:component","target":"components/charts/use-mount-progress.ts"},{"path":"src/charts/use-enter-complete.ts","content":"\"use client\";\n\nimport type { MotionValue } from \"motion/react\";\nimport { useEffect, useState } from \"react\";\n\n/**\n * Returns true once a mount-progress MotionValue reaches 1.\n * Use to swap animated MotionValue-driven props for static values after\n * enter completes — drops per-frame subscriptions during pan/hover.\n */\nexport function useEnterComplete(mountProgress: MotionValue): boolean {\n const [complete, setComplete] = useState(() => mountProgress.get() >= 1);\n\n useEffect(() => {\n if (mountProgress.get() >= 1) {\n setComplete(true);\n return;\n }\n\n return mountProgress.on(\"change\", (value) => {\n if (value >= 1) {\n setComplete(true);\n }\n });\n }, [mountProgress]);\n\n return complete;\n}\n","type":"registry:component","target":"components/charts/use-enter-complete.ts"},{"path":"src/charts/chart-reveal-clip.tsx","content":"$54","type":"registry:component","target":"components/charts/chart-reveal-clip.tsx"},{"path":"src/charts/static-chart-preview-context.tsx","content":"\"use client\";\n\nimport { createContext, type ReactNode, useContext } from \"react\";\n\nconst StaticChartPreviewContext = createContext(false);\n\n/** Disables cartesian reveal clip-path for static docs previews. */\nexport function StaticChartPreviewProvider({\n children,\n}: {\n children: ReactNode;\n}) {\n return (\n \n {children}\n \n );\n}\n\nexport function useStaticChartPreview() {\n return useContext(StaticChartPreviewContext);\n}\n","type":"registry:component","target":"components/charts/static-chart-preview-context.tsx"},{"path":"src/charts/chart-defs.ts","content":"$55","type":"registry:component","target":"components/charts/chart-defs.ts"}],"className":"h-[70svh] min-h-80"}]]}]