feat(studio): track design-panel input usage across both inspector UIs (#2467)

* feat(studio): add design-panel input usage tracking primitive

* feat(studio): track input usage in classic inspector panel

* feat(studio): track input usage in flat inspector panel

* fix(studio): attribute animation meta by field, track classic chrome, widen coverage guard
This commit is contained in:
Miguel Ángel
2026-07-15 01:33:27 -04:00
committed by GitHub
parent e3ca89e9ac
commit 7cc10a9922
33 changed files with 1613 additions and 188 deletions
@@ -1,3 +1,4 @@
import { useTrackDesignInput } from "../../contexts/DesignPanelInputContext";
import { FlatRow, FlatSegmentedRow, FlatSelectRow } from "./propertyPanelFlatPrimitives";
import { KeyframeNavigation } from "./KeyframeNavigation";
import { formatPxMetricValue } from "./propertyPanelHelpers";
@@ -67,6 +68,7 @@ function KeyframeGutter({
| "onRemoveKeyframe"
| "onConvertToKeyframes"
>) {
const track = useTrackDesignInput();
if (!STUDIO_KEYFRAMES_ENABLED || !gsapAnimId) return null;
const hasKeyframesOnProp = Boolean(navKeyframes?.some((kf) => property in kf.properties));
return (
@@ -76,11 +78,21 @@ function KeyframeGutter({
keyframes={navKeyframes}
currentPercentage={currentPct}
onSeek={seekFromKfPct}
onAddKeyframe={() =>
onCommitAnimatedProperty && void onCommitAnimatedProperty(element, property, displayValue)
}
onRemoveKeyframe={(pct) => onRemoveKeyframe?.(animIdForProp(property), pct)}
onConvertToKeyframes={() => onConvertToKeyframes?.(animIdForProp(property))}
onAddKeyframe={() => {
if (!onCommitAnimatedProperty) return;
track("button", `Add ${property} keyframe`);
void onCommitAnimatedProperty(element, property, displayValue);
}}
onRemoveKeyframe={(pct) => {
if (!onRemoveKeyframe) return;
track("button", `Remove ${property} keyframe`);
onRemoveKeyframe(animIdForProp(property), pct);
}}
onConvertToKeyframes={() => {
if (!onConvertToKeyframes) return;
track("button", `Convert ${property} to keyframes`);
onConvertToKeyframes(animIdForProp(property));
}}
/>
</span>
);